10
تشکر

استفاده از تگ use در SVG

Scalable Vector Graphics

Scalable Vector Graphics

روز به روز استفاده از آیکون فونت ها و SVG در حال افزایش است. اما انتظار میرود که SVG پیشتاز، در استفاده از آیکون ها و اشکال مختلف در صفحات وب باشد. زیرا SVG دارای قابلیت های بیشتری نسبت به آیکون فونت است و شما میتوانید میتوانید انیمیشن های مختلفی بر روی آن به کار ببرید، و یا با کدهای CSS به آن استایل بدهید و فیلترهای مناسب روی آن بگذارید و یا هر زمان که خواستید میتوانید آیکون یا شکل را تغییر دهید.

ما نیز سعی داریم بیشتر با SVG آشنا شویم. اگر هیچ زمینه ای در رابطه با SVG ندارید، میتوانید مطلب قبلی با عنوان راهنمای کامل SVG را مطالعه کنید.

در این مطلب میخواهیم با تگ use در SVG آشنا شویم. در ادامه مطلب همراه ما باشید…

تگ use چیست؟

شاید مطلب معرفی تگ template در HTML5 را به خاطر داشته باشید، در آن مطلب با ویژگی تمپلیت در HTML5 آشنا شدیم. تگ use نیز یک نوع تمپلیت برای استفاده در SVG است. برای مثال شما میخواهید از یک SVG در چندین مکان در صفحه خود استفاده کنید. خب روش معمول به این صورت است که باید تمام کدهای SVG را، در مکان هایی که به آن نیاز دارید کپی کنید و قرار دهید.

اما روش بهتری نیز وجود دارد. ابتدا یک SVG را به عنوان تمپلیت در نظر میگیریم، سپس با استفاده از تگ use آن را فراخوانی میکنیم.

برای مثال در کد زیر ما یک دایره با شعاع 50px در مرکز یک svg رسم کردیم. همچنین به دایره یک id برای استفاده از آن در تگ use دادیم، و در نهایت با دادن کلاس hidden به svg آن را مخفی display:none کردیم.

<svg width="100px" height="100px" class="hidden">
  <circle id="cir-template" cx="50" cy="50" r="50"></circle>
</svg>

حالا به راحتی از دایره بالا میتوان در هر کجای صفحه استفاده کرد. برای مثال در کد زیر با استفاده از خاصیت xlink:href ما id دایره را به تگ use دادیم تا آن را به نوعی import کنیم.

<svg width="100px" height="100px" class="circle cricle1">
  <use xlink:href="#cir-template"></use>
</svg>

به همین صورت میتوانید هر تعداد که خواستید از آن دایره استفاده کنید.

برای مثال در نمونه زیر ما با استفاده از template سه دایره با رنگ های مختلف ساختیم. شما میتوانید رنگ های اشکال در SVG را با خصوصیت fill در CSS تغییر دهید.


See the Pen SVG shape template by aparnet.ir (@aparnet) on CodePen.

در مطلب آینده در مورد SVG، با انیمیشن ها آشنا میشویم.


نظرات این مطلب بسته است.