عنصر <defs> لـ SVG

يُستخدم عنصر <defs> في SVG لضميم التعريفات التي يمكن إعادة استخدامها داخل صورة SVG. على سبيل المثال، يمكنك تجميع أشكال SVG معًا ثم تكرار استخدامها كشكل واحد.

مثال على defs

هذا مثال بسيط لعنصر <defs>:

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100" y="100" width="100" height="100"/>
　　　　　　　　　　　　<circle cx="100" cy="100" r="100"/>
　　　　　　　　</g>
　　　　</defs>
</svg>

الشكل المحدد في علامة <defs> لن يظهر في صورة SVG. يجب استخدامه قبل عرضه من خلال علامة <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>، يجب تعيينه ID له من خلال خاصيته id. يتم استخدام خاصية xlink:href لعنصر <use> للإشارة إلى عنصر <g>. يلاحظ أن هناك # قبل ID في القيمة.

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

تأثير الصورة بعد التنفيذ:

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

ما هي العناصر التي يمكن تعريفها داخل عنصر defs؟

يمكنك وضع العناصر التالية داخل عنصر <defs>:

• أي عنصر شكل (rect،line،ect.)

• g

• رمز