English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

تعليمية SVG

عناصر SVG

عنصر <a> لـ SVG

استخدام عنصر رابط SVG ( <a>) لتحديد رابط. عنصر <a> في SVG يستخدم لإنشاء روابط داخل صورة SVG، ويعمل رابط SVG كما يعمل رابط HTML.

مثال بسيط:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/svg-tutorial.html">
　　　　　　　　<text　x="10"　y="20">/svg/svg-tutorial.html</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　xlink:show="new">
　　　　　　　　<text x="10" y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
　　　　　　　　<text x="10" y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_blank">
　　　　　　　　<text x="10" y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_top">
　　　　　　　　<text x="10" y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>
الاختبار لرؤية‹/›

هذه هي صورة النتيجة:

/svg/svg-tutorial.html 　 　/svg/svg-tutorial.html 　 　 　 　 (xlink:show="new") 　 　/svg/svg-tutorial.html 　 　 　 　 (xlink:show="replace") 　 　m/svg/svg-tutorial.html 　 　 　 　 (target="_blank") 　 　/svg/svg-tutorial.html 　 　 　 　 (target="_top")

يمكنك تعيين الخاصية على-element xlink:show <a> إلى new أو replace لتحديد ما إذا كان يجب عرض المحتوى الذي يشير إليه الرابط في نافذة جديدة أم استبدال محتوى النافذة الحالية.

يرجى ملاحظة أنه إذا كنت تستخدم replace وتظهر صورة SVG في iframe، فإن iframe سيكون الهدف، وليس نافذة المتصفح. إذا كنت ترغب في استخدام نافذة المتصفح بدلاً من نافذة الهدف iframe، استخدم خاصية target بقيمة _top.

يمكنك أيضًا تعيين خاصية target لتخبر المتصفح عن فتح الروابط في إطار أو نافذة محددة. مثل خصائص الروابط في targetHTML (على الأقل نظريًا). يرجى ملاحظة أن المتصفح يفسر قيم الخاصية بشكل مختلف. لمزيد من التفاصيل، يرجى الرجوع إلى الجزء الأخير من هذه الصفحة.

الرسوم البيانية كروابط

يمكن أيضًا استخدام الرسوم البيانية كروابط. كل ما تحتاجه هو ربط النص الذي سيتم استخدامه كشكل SVG بين علامات <a> و</a>. هذا مثال يستخدم المربع بدلاً من النص كرابط:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/index.html"　target="_top">
　　　　　　　　<rect　x="10"　y="20"　width="75"　height="30"
　　　　　　　　　　　　　　　　style="stroke:　#333366;　fill:　#6666cc"/>
　　　　</a>
　　　　
</svg>
الاختبار لرؤية‹/›

هذه هي صورة النتيجة:

عنصر <defs> لـ SVGعنصر <textPath> لـ SVG