در 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 & 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>
عالی مثل همیشه
یک مدته کم پست میگذارید. حتی توی تلگرام
سلام. ممنون از راهنمایی تون. عالی ه عالی! ممنون
یه سوال دارم فقط: از دید منطقی، brackets برای طراحی وب ، یک ide هست یا یک text editor ؟
موفق باشید….به امید فعالیت بیشترررررررررر