بروز رسانی آذر ۲۰ام, ۱۳۹۸ ۱۰:۰۲ قبل از ظهر
متن در SVG
متن در SVG
|متن در SVG از دکتر css|
در 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>
CSS-Tricks.ir
در مثال بالا حرف اول روی محور افقی در فاصله ۴۰ پیکسل و همچنین پایین آن حرف در فاصله ۹۰ پیکسلی از بالای 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>
CSS-Tricks.ir
همچنین ویژگی 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>
CSS-Tricks.ir
در نهایت همزمان با آن ویژگی می تواند از ویژگی 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>
CSS-Tricks.ir
textLength و همچنین lengthAdjust
ویژگی textLength مقدار و اندازه متن را مشخص می کند. به آن صورت که در صورتی که مقدار و اندازه مثلا ۳۰۰ پیکسل جهت آن ویژگی مشخص کردن کنیم مقدار و اندازه بین حروف طوری مشخص کردن می می شود که مقدار و اندازه متن به ۳۰۰ پیکسل برسد. حال در صورتی که مستلزم و نیاز باشد فاصله بین حروف زیاد می می شود و همچنین یا حروف روی هم می‌آیند تا مقدار و اندازه متن به مقدار مشخص شده برسد.
<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>
CSS-Tricks.ir
هنگام و زمانی که آن ویژگی همراه با ویژگی 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>
CSS-Tricks.ir
عنصر 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>
CSS-Tricks.ir
نقطه مهمی که بایستی و حتما در نظر داشته باشیم آن می باشد که زمانی که مختصات قسمتی از متن را با بهره بری و استفاده از 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>
CSSTricks.ir
همچنین می توانیم مختصات حروف متنوع و گوناگون و مختلف را بصورت مجزا مشخص کردن کنیم. جهت آن کار کافی می باشد به ویژگی 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>
CSSTricks.ir
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>
CSS-Tricks.ir
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>
SVG is Fun!
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
متن در امتداد یک مسیر
در 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>
Wish you the best of lives & all the happiness
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> جهت دیدن کردن و نمایش مسیر نیز بهره بری و استفاده کردیم:
Wish you the best of lives & all the happiness
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>
CSS-Tricks.ir
نوشته متن در SVG اولین بار در آموزش طراحی وب پدیدار شد.
