عنصر <use> لـ SVG

عنصر <use> في SVG يمكنه تكرار الشكل في مواقع أخرى داخل وثيقة SVG (بما في ذلك عناصر <g> و <symbol>) يمكن تعريف الشكل في الداخل (في علامة <defs> مما يجعله غير مرئي حتى يتم استخدامه) أو في الخارج.

مثال use

هذا<use>مثال بسيط:

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<g　id="shape">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50" y="50"></use>
　　　　<use xlink:href="#shape" x="200" y="50"></use>
　　　　<circle cx="50" cy="50" r="5" style="fill:#0000ff;"></circle>
　　　　<circle cx="200" cy="50" r="5" style="fill:#0000ff;"></circle>
</svg>

هذا المثال يوضح عنصر الـ <g> الذي تم تعريفه داخل عنصر الـ <defs>. يجعل <g> غير مرئي، ما لم يتم استخدامه من خلال عنصر الـ <use>.

قبل مراجعة عنصر الـ <g>، يجب تعيينه باستخدام معرف الـ ID الخاص به. يتم مراجعة العنصر من خلال سمة الـ xlink:href. لاحظ أن هناك علامة الـ # قبل معرف الـ ID.

يحدد عنصر الـ <use> أماكن العرض للشكل المُعيد استخدامه من خلال سمتي الـ x و y. لاحظ أن الشكل الموجود داخل عنصر الـ <g> يبدأ من 0,0. يتم القيام بذلك لأن موقع الشكل تم إضافته إلى الموقع المحدد في عنصر الـ <use>.

تأثير الصورة بعد التشغيل:

النقطة الزرقاء ليست جزءًا من المثال. تم إضافتها لعرض x و y للعناصر الـ <use>.

استخدام الشكل خارج عنصر الـ <defs>

يمكن استخدام عنصر الـ <use> لإعادة استخدام أي عنصر في صورة الـ SVG، طالما أن الشكل يحتوي على معرف فريد من نوعه (معرف الـ id). هذا مثال:

<svg width="500" height="110">　　　　
<g id="shape2">　　　　
<rect x="0" y="0" width="50" height="50"/>　　　　
</g>　　　　
<use xlink:href="#shape2" x="200" y="50"/>　　　　
<circle cx="200" cy="50" r="5" style="fill:#0000ff;"/>　　　　
</svg>

في هذا المثال، تم تعريف عنصر الـ <g> الذي يحتوي على عنصر الـ <rect>. ثم، تم إعادة استخدامه من خلال عنصر الـ <use> (بما في ذلك العناصر المحتوية على <rect>).

تأثير الصورة بعد التشغيل:

لاحظ أن الشكل الأصلي ومسارته المحتملة يتم عرضهما معًا. يحدث هذا لأن الشكل الذي يتم إعادة استخدامه لم يتم تعريفه داخل عنصر الـ <defs> أو <symbol> (عنصر الـ <g>). لذا، يظل مرئيًا.

بالمثل، تظهر النقاط الزرقاء أماكن العناصر في العنصر الـ <use>.

تعيين سمة الـ CSS

إذا لم يتم تعيين سمة الـ CSS على الشكل الأصلي، يمكنك تعيين سمة الـ CSS عند إعادة استخدام الشكل. كل ما تحتاجه هو تحديد الأنماط التي تريد تعيينها في سمة الـ style في عنصر الـ <use>. هذا مثال:

<svg width="500" height="110">
　　<g id="shape3">
　　　　　　<rect x="0" y="0" width="50" height="50"/>
　　</g>
　　<use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
　　<use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>
</svg>

لا توجد خاصية style معرّفة على الشكل الأصلي. ثم سيتم استخدام النمط الافتراضي (عادةً الأسود) للرسم.