بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
مرداد ۰۶, ۱۳۹۸ admin آموزش پیشرفته css, آموزش مقدماتی css 0
در SVG امکان قرار دادن متن نیز وجود دارد، که جهت آن کار بایستی و حتما از عنصری به نام <text>
بهره بری و استفاده کنیم.
آن عنصر چندین ویژگی جهت تغییر ظاهر متن اعم از فاصله بین حروف و همچنین کلمات،چرخش متن، اعمال فیلتر و همچنین غیره نیز می پذیرد که در ادامه به معرفی آنها می پردازیم.
اولین حرف داخل عنصر <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 می باشد.
چرخش می تواند بر روی تک تک حروف انجام می شود و همچنین یا روی تمام متن صورت گیرد. در صورتی که به آن ویژگی یک مقدار داده می شود تمام حروف و همچنین نشانه های موجود در متن بصورت مجزا به آن هم مقدار می چرخند:
<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
مقدار و اندازه متن را مشخص می کند. به آن صورت که در صورتی که مقدار و اندازه مثلا ۳۰۰ پیکسل جهت آن ویژگی مشخص کردن کنیم مقدار و اندازه بین حروف طوری مشخص کردن می می شود که مقدار و اندازه متن به ۳۰۰ پیکسل برسد. حال در صورتی که مستلزم و نیاز باشد فاصله بین حروف زیاد می می شود و همچنین یا حروف روی هم میآیند تا مقدار و اندازه متن به مقدار مشخص شده برسد.
<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
با مقدار auto
به ما اجازه میدهد تا آن فضا را بنا بر جدول کرنینگ فونت مورد بهره بری و استفاده تنظیم کنیم. همینطور میتوانیم یک مقدار و اندازه دلخواه جهت آن ویژگی مشخص کردن کنیم. به عنوان مثال kerning="30"
.
درضمن میتوانیم جهت مقدار دهی به آن ویژگی از واحدهای متنوع و گوناگون و مختلف مقدار و اندازه مثل px، em و همچنین غیره بهره بری و استفاده کنیم، همچنین کلمه کلیدی inherit
نیز قابل بهره بری و استفاده میباشد.
ویژگی 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
جهت تنظیم فاصله بین کلمات بهره بری و استفاده میمی شود.
مقدار پیشفرض آن ویژگی 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!
آن ویژگی آن هم کاری را انجام میدهد که در 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
بهره بری و استفاده کنیم.
اول از همه بایستی و حتما مسیری را با بهره بری و استفاده از عنصر 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
میقدرت نقطه شروع متن بر روی مسیر را تغییر داد.
<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
از آنجایی که متن در 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 اولین بار در آموزش طراحی وب پدیدار شد.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0