متن در SVG

در SVG امکان قرار دادن متن نیز وجود دارد، که برای این کار باید از عنصری به نام <text> استفاده کنیم.

این عنصر چندین ویژگی برای تغییر ظاهر متن اعم از فاصله بین حروف و کلمات،‌چرخش متن، اعمال فیلتر و غیره نیز می پذیرد که در ادامه به معرفی آنها می پردازیم.

x, y, dx, dy

اولین حرف داخل عنصر <text> با توجه به مقدار ویژگی x و y روی صفحه ترسیم می شود. x مکان شروع ترسیم این حرف را بر روی محور x یا همان افقی و y مکان پایین این حرف را بر روی محور عمودی مشخص می کند.

مقادیر x و y مطلق‌اند اما مقادیر dx و dy از نوع مقادیر نسبی هستند بدین معنی که زمانی که موقعیت عنصری را با استفاده از آنها مشخص می‌کنیم، آن موقعیت نسبت به عنصر قبل محاسبه می‌شود. در ادامه با این نوع بیشتر آشنا خواهیم شد.

<svg width="620" height="100">
    <text x="40" y="90" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

در مثال بالا حرف اول روی محور افقی در فاصله 40 پیکسل و پایین این حرف در فاصله 90 پیکسلی از بالای viewport قرار دارد.

نکته مهم اینکه اندازه دهی برای محور x وابسته به direction عنصر SVG می باشد. یعنی اگر در یک محیط RTL یا همان راست به چپ باشیم مقدار x مشخص کننده فاصله سمت راست اولین حرف از سمت راست نوشته نسبت به محور x می باشد.

rotate

چرخش می تواند بر روی تک تک حروف انجام شود و یا روی تمام متن صورت گیرد. اگر به این ویژگی یک مقدار داده شود تمام حروف و نشانه های موجود در متن بصورت مجزا به همان مقدار می چرخند:

<svg width="620" height="200">
    <text x="40" y="90" rotate="30" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

همچنین ویژگی rotate می تواند رشته ای از مقادیر را بگیرد که در این صورت هر یک از مقادیر به ترتیب بر روی حروف اعمال می شوند. اگر مقادیر کمتر از تعداد حروف باشند آخرین مقدار برای حروف باقی مانده در نظر گرفته می شود:

<svg width="620" height="200">
    <text x="40" y="90" rotate="10 20 30 40 50 60 70 -10" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

در نهایت همزمان با این ویژگی می تواند از ویژگی transform برای چرخش کل متن نیز استفاده کرد:

<svg width="620" height="200">
    <text x="40" y="90" transform="rotate(10)" rotate="10 20 30 40 50 60 70 -10" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

textLength و lengthAdjust

ویژگی textLength اندازه متن را مشخص می کند. به این صورت که اگر اندازه مثلا 300 پیکسل برای این ویژگی تعیین کنیم اندازه بین حروف طوری تعیین می شود که اندازه متن به 300 پیکسل برسد. حال اگر نیاز باشد فاصله بین حروف زیاد می شود و یا حروف روی هم می‌آیند تا اندازه متن به مقدار مشخص شده برسد.

<svg width="700" height="200">
  <text x="0" y="90" textLength="300" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

وقتی این ویژگی همراه با ویژگی lengthAdjust مورد استفاده قرار میگیرد می توان جدا از فاصله بین حروف اندازه حروف را نیز عاملی برای تغییر اندازه متن نسبت به مقدار textLength قرار داد.

ویژگی lengthAdjust دو مقدار می گیرد که مقدار spacing دقیقا نتیجه مثال بالا را خواهد داشت. مقدار دیگری که این ویژگی میگیرد spacingAndGlyphs است که همانطور که گفته شد علاوه بر فاصله بین حروف اندازه هر حرف را نیز تغییر خواهد داد تا اندازه متن مورد نظر برسیم.

<svg width="700" height="200">
  <text x="0" y="90" textLength="300" lengthAdjust="spacingAndGlyphs" fill="#ED6E46" font-size="80" font-family="cursive">CSS-Tricks.ir</text>
</svg>

عنصر tspan

به دلیل اینکه درحال حاضر SVG امکان شکستن خطوط متن و کلمات را نمی دهد وجود عنصر tspan می تواند خیلی مفید باشد. به این ترتیب که هرکجا نیاز باشد می توانیم قسمتی از متن یا کلمه را درون این عنصر قرار دهیم و ویژگی های مروبطه را فقط برای آن قسمت مشخص کنیم.

توجه داشته باشید که خود عنصر tspan به تنهایی هیچ تاثیری در ظاهر متن نمی گذارد. اما می توان با اعمال ویژگی های مختلف روی آن قسمتی از متن یا کلمه را بصورت خاصی طراحی کرد.

در مثال زیر به کلمه آخر رنگ و موقعیت مکانی خاصی می دهیم، همچنین از dy استفاده می‌کنیم تا موقعیت عنصر نسبت به حرف آخر نوشته محاسبه شود:

<svg width="700" height="200">
  <text x="0" y="90" fill="#ED6E46" font-size="80" font-family="cursive">
    CSS-Tricks<tspan dy="-20" fill="#bbc42a" font-size="80">.ir</tspan>
  </text>
</svg>

نکته مهمی که باید در نظر داشته باشیم این است که زمانی که مختصات قسمتی از متن را با استفاده از tspan تغییر می دهیم ادامه متن بعد از tspan نسبت به مختصات مشخص شده تعیین مکان می شود.

به عنوان نمونه اگر در مثال بالا کلمه Tricks را در tspan قرار داده و مختصاتش را تغییر می دادیم ادامه متن که .ir است مختصات جدید را میگرفت:

<svg width="700" height="200">
  <text x="0" y="90" fill="#ED6E46" font-size="80" font-family="cursive">
    CSS-<tspan dy="40" fill="#bbc42a" font-size="80">Tricks</tspan>.ir
  </text>
</svg>

همچنین می توانیم مختصات حروف مختلف را بصورت مجزا تعیین کنیم. برای این کار کافی است به ویژگی dy لیستی از مختصات ها را بدهیم تا به ترتیب بر روی حروف اعمال شوند. درضمن توجه داشته باشیم که چون از dy استفاده می‌کنیم هر حرف مختصاتش نسبت به حرف قبلی تعیین می شود:

<svg width="700" height="200">
  <text x="0" y="90" fill="#ED6E46" font-size="80" font-family="cursive">
    CSS-<tspan dy="10 15 20 25 30 -90" fill="#bbc42a" font-size="80">Tricks</tspan>.ir
  </text>
</svg>

kerning

کرنینگ فرایند مربوط به تنظیم‌کردن فضاها بین کاراکترها می‌باشد. ویژگی kerning با مقدار auto به ما اجازه می‌دهد تا این فضا را بنا بر جدول کرنینگ فونت مورد استفاده تنظیم کنیم. همینطور می‌توانیم یک اندازه دلخواه برای این ویژگی تعیین کنیم. به عنوان مثال kerning="30".

درضمن می‌توانیم برای مقدار دهی به این ویژگی از واحدهای مختلف اندازه مثل px، em و غیره استفاده کنیم، همچنین کلمه کلیدی inherit نیز قابل استفاده می‌باشد.

letter-spacing

ویژگی letter-spacing نیز برای تنظیم فاصله بین کاراکترها استفاده می‌شود، همچنین مقداری که برای آن استفاده می‌کنیم مازاد بر مقدار kerning خواهد بود. مقادیر این ویژگی شامل inherit، normal و مقادیر طولی می‌باشد.

<svg width="620" height="100">
    <text x="30" y="70" letter-spacing="25" fill="#ED6E46" font-size="40" font-family="cursive">CSS-Tricks.ir</text>
</svg>

word-spacing

از ویژگی word-spacing برای تنظیم فاصله بین کلمات استفاده می‌شود.

مقدار پیشفرض این ویژگی normal است و همینطور مقادیر طولی و inherit را نیز می‌پذیرد.

<svg width="620" height="100">
    <text x="90" y="70" word-spacing="100" fill="#ED6E46" font-size="40" font-family="cursive">SVG is Fun!</text>
</svg>

text-decoration

این ویژگی همان کاری را انجام می‌دهد که در CSS انجام می‌دهد.

مقادیر این ویژگی underline، overline و line-through می‌باشند.

<svg width="620" height="200">
  <text x="170" y="150" text-decoration="line-through" fill="#ED6E46" stroke="#CDDC39" stroke-width="5" font-size="130" font-family="cursive">SVG</text>
</svg>

متن در امتداد یک مسیر

در SVG این امکان وجود دارد که متن را در امتداد یک مسیر نمایش دهیم. برای این کار کافی است از عنصر textPath استفاده کنیم.

textPath

اول از همه باید مسیری را با استفاده از عنصر path طراحی کنیم و آن را در عنصر <defs> قرار دهیم، سپس کافی است id مسیر ساخته شده را به ویژگی xlink:href این عنصر بدهیم:

<svg>
    <defs>
        <path id="testPath" d="<....>"/>
    </defs>
    <text>
        <textPath xlink:href="#testPath">Place text here</textPath>
    </text>
</svg>

به عنوان نمونه:

<svg width="620" height="200">
  <defs>
    <path id="testPath" d="M3.858,110 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
  </defs>
  <text x="10" y="10" fill="#bbc42a" font-size="30" font-family="sans-serif">
    <textPath xlink:href="#testPath">Wish you the best of lives & all the happiness</textPath>
  </text>  
</svg>

startOffset

با استفاده از ویژگی startOffset می‌توان نقطه شروع متن بر روی مسیر را تغییر داد.

<svg width="620" height="200">
  <defs>
    <path id="testPath" d="M3.858,110 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449"></path>
  </defs>
  
  <use xlink:href="#testPath" fill="none" stroke="#ED6E46" stroke-width="2"/>
  <text x="10" y="10" fill="#bbc42a" font-size="23" font-family="sans-serif">
    <textPath xlink:href="#testPath" startOffset="10%">Wish you the best of lives &amp; all the happiness</textPath>
  </text>
</svg>

برای شفاف سازی بهتر این ویژگی از عنصر <use> برای نمایش مسیر نیز استفاده کردیم:

Text Outline

از آنجایی که متن در SVG یک گرافیک محسوب می‌شود در نتیجه می‌توان برای ساخت افکت outline، به راحتی رنگ متن را حذف کنیم و به متن stroke بدهیم:

<svg width="620" height="100">
    <text x="180" y="70" fill="none" stroke="#ED6E46" stroke-width="1" font-size="40" font-family="cursive">CSS-Tricks.ir</text>
</svg>