SVG Text

نوشته شده توسط: adminدر تاریخ: خرداد ۰۹, ۱۳۹۵در: آموزشیبازدید: 606 بازدید

در سری مقالات قبلی تصاویر با SVG به ترسیم اشکال مختلف پرداختیم و نحوه ایجادشون رو توضیح دادیم. در این قسمت به ایجاد تصاویر جدیدی در SVG ها که اون هم قرار دادن متن یا نوشته در SVG ها میباشد. لطفا تا آخر مقاله همراه ما باشید.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

<SVG Text – <text:

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

<!DOCTYPE html>
<html>
<body>
<svg height=”30″ width=”200″>
<text x=”0″ y=”15″ fill=”red”>I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

همچنین ما میتونیم توسط ویژگی transform، نوشتمون رو به هر میزان که میخوایم بچرخونیم. به کدر زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>
<svg height=”60″ width=”200″>
<text x=”0″ y=”15″ fill=”red” transform=”rotate(30 20,40)”>I love SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توسط عنصر <tspan> می تونیم در عنصر <text> چیدمان هر تعداد از زیرگروه های متنی رو مرتب کنیم. هر عنصر <tspan> حاوی چندین فرمت و موقعیت مختلف است. کد زیر نمایانگر حرفایی که زدیم هست :

<!DOCTYPE html>
<html>
<body>
<svg height=”90″ width=”200″>
<text x=”10″ y=”20″ style=”fill:red;”>Several lines:
<tspan x=”10″ y=”45″>First line.</tspan>
<tspan x=”10″ y=”70″>Second line.</tspan>
</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

برای اینکه بتونیم یک متن رو به عنوان لینک یا پیوست قرار بدیم باید از طریق زیر عمل کنیم:

<!DOCTYPE html>
<html>
<body>
<svg height=”30″ width=”200″ xmlns:xlink=”https://learnfiles.com/“>
<a xlink:href=”https://learnfiles.com/” target=”_blank”>
<text x=”0″ y=”15″ fill=”red”>I love SVG!</text>
</a>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>