بخش مقالات آکادمی | Articles
آخرین آموزش ها

در سری مقالات قبلی تصاویر با 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>

امیدوارم مطالب گفته شده بدردتون خورده باشه. ممنون از همراهیتون.

تاریخ ارسال
10 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.