عنصر <text> لـ SVG

يستخدم عنصر <text> في SVG لرسم النص. يمكن استخدام عنصر <text> في SVG لرسم النص، إدارة دوران النص، نص متعدد الأسطر، نص يحتوي على رابط، إلخ

لرسم النص، استخدم عنصر <text>.

　　　　　　<h1>SVG　Text</h1>
　　　　　　<svg　width="550"　height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="40"　y="23"　>Text:　</text>
　　　　　　　　　　　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ar.oldtoolbag.com　دليل تعليمي أساسي　</text>
　　　　　　　　　</g>　
　　　　　　</svg>

النتيجة بعد التشغيل كالتالي:

نص SVG

توضيح الاستخدام

x: يحدد موقع الزاوية العلوية اليسرى للنص.

y: يحدد موقع أعلى النص.

width: يحدد العرض.

height: يحدد الارتفاع.

fill: تستخدم الخاصية fill لتحديد لون التعبئة.

نص مقلوب

يستخدم لإنشاء نص مقلوب.

<svg　height="100"　width="200">
　　<text　x="0"　y="15"　fill="red"　transform="rotate(30　20,40)">ar.oldtoolbag.com</text>
</svg>

النتيجة بعد التشغيل كالتالي:

توضيح الاستخدام

x: يحدد موقع الزاوية العلوية اليسرى.

y: يحدد موقع القمة.

width: يحدد العرض.

height: يحدد الارتفاع.

fill: تستخدم الخاصية fill لتحديد لون التعبئة.

نص متعدد الأسطر

يستخدم لإنشاء نص متعدد الأسطر. يمكن استخدام عنصر <tspan> لتنظيم عنصر <text> في عدد غير محدود من المجموعات الفرعية.

<svg　width="570"　height="100">
　　<g>
　　<text　x="40"　y="23"　>نص متعدد الأسطر:　</text>
　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ar.oldtoolbag.com
　　　<tspan　x="40"　y="60"　font-weight="bold">　دليل تعليمي أساسي على الإنترنت.　</tspan>
　　　</text>
　　</g>
　</svg>

النتيجة بعد التشغيل كالتالي:

توضيح الاستخدام

x: يحدد موقع الزاوية العلوية اليسرى.

y: يحدد موقع القمة.

width: يحدد العرض.

height: يحدد الارتفاع.

fill: تستخدم الخاصية fill لتحديد لون التعبئة.

نص رابط

يستخدم لإنشاء نص يحتوي على رابط.

　　　　　　<svg　width="500"　height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="20"　y="10"　>Text　as　Link:　</text>
　　　　　　　　　
　　　　　　　　　　　　<a　xlink:href="https://ar.oldtoolbag.com/svg-tutorial"　target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40">　
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40">ar.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

النتيجة بعد التشغيل كالتالي:

توضيح الاستخدام

x: يحدد موقع الزاوية العلوية اليسرى.

y: يحدد موقع القمة.

width: يحدد العرض.

height: يحدد الارتفاع.

fill: تستخدم الخاصية fill لتحديد لون التعبئة.