عنصر SVG <textPath>

يستخدم علامة <textpath> في SVG لتنظيم النص عبر المسار (مثل، دائرة)، ويبدو هذا الإجراء رائعًا. قد يختلف طريقة عرض النص عبر المسار بين المتصفحات المختلفة، لذا تأكد من التحقق من مظهر النص في المتصفحات المدعومة.

مثال على الإنترنت

<svg width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0" />　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com دروس أساسية...</textPath>　　　　
</text>　　　　
</svg>

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

لاحظ كيف أن علامة <path> (داخل العنصر <defs>) تحتوي على خاصية id. قيمة هذا الخاصية id مُستخدمة من خلال خاصية xlink:href لـ <textpath>.

إذا كانت طول المسار أقصر من طول النص، فإنه يتم رسم جزء النص الذي يقع داخل نطاق توسع المسار فقط.

يمكنك أيضًا استخدام مسارات أكثر تعقيدًا. هذا مثال على مسار نصي معقد:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path　id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20　l100,0　l100,30　q0,100　150,100"/>
　　　　</defs>
　　　　<text　x="20"　y="40"　style="stroke:　#000000;">
　　　　　　　　<textPath　xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　تعليمية الأساس....
　　　　　　　　</textPath>
　　　　</text>
</svg>

تعريف هذا المثال مسار نصي مكون من خط مستقيم، خط مائل، وخط منحني.

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