در سری مقالات قبلی تصاویر با 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>
امیدوارم مطالب گفته شده بدردتون خورده باشه. ممنون از همراهیتون.
نوشته SVG Text اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses