عنصر <tspan> لـ SVG

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

مثال tspan

هذا مثال بسيط على <tspan>:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>خط tspan 1</tspan>
　　　　　　　　<tspan>tspan　line　2</tspan>
　　　　</text>
</svg>

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

لاحظ كيف يؤدي الناتج <tspan> إلى تحديد موقع النصوص البارزة بالنسبة لبعضها البعض (بعد بعضها البعض).

توضيح عمودي

إذا كنت ترغب في وضع الخطوط بشكل عمودي مطلق، يمكنك استخدام خاصية dy (الفرق العمودي):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>خط tspan 1</tspan>
　　　　　　　　<tspan　dy="10">tspan　line　2</tspan>
　　　　</text>
</svg>

الآن، بسبب أن خاصية dy للتبويب الثاني <tspan> تم تعيينها إلى "10"، فإن النص الثاني يظهر تحت النص الأول بـ 10 بكسل. إليك الصورة الناتجة:

إذا كنت ترغب في تحديد موقع علامة التبويب <tspan> في موقع عمودي مطلق يُدعى y، فاستخدم الخاصية مثلما تفعل مع علامة التبويب <text>.

إذا تم كتابة عدة أرقام داخل خاصية dy، فإن كل رقم سيطبق على حروف النص داخل علامة التبويب <tspan>. إليك مثال:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text　x="10"　y="15">
　　　　　　　　　　　　<tspan　dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

هذا هو الصورة المولد. يرجى ملاحظة كيف تتغير المسافات العمودية بين الأشكال.

تحديد الموقع الأفقي

لتحديد موقع النص بشكل مطلق على المحور x، يمكنك استخدام خاصية dx (delta x). هذا المثال يوضح تأثير تعيين dx إلى 30: يرجى ملاحظة أن السطر الثاني يظهر الآن بعد نهاية السطر الأول (لا هو في البداية) 30 بكسلًا:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>خط tspan 1</tspan>
　　　　　　　　<tspan dx="30" dy="10">خط tspan 2</tspan>
　　　　</text>
</svg>

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

إذا تم تحديد عدة أرقام داخل خاصية dx، فإن كل رقم سيطبق على كل حرف داخل علامة التبويب <tspan>. هذا مثال:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5 10 20">123</tspan>
</text></svg>

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

يمكنك أيضًا تعيين خاصية x لتحديد موقع x للسطر النصي. إذا كنت ترغب في عرض قائمة لكل سطر غير منظم تحت بعضه البعض، هذا سيكون مفيدًا. هذا مثال على إعداد x لثلاثة أسطر على 10:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text y="20">
　　　　　　　　<tspan x="10">خط tspan 1</tspan>
　　　　　　　　<tspan x="10" dy="15">خط tspan 2</tspan>
　　　　　　　　<tspan x="10" dy="15">خط tspan 3</tspan>
　　　　</text>
</svg>

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

نمط علامة التبويب tspan

يمكنك تعيين نمط العنصر بشكل منفرد. لذلك، يمكنك استخدام علامة التبويب <tspan> لتعيين نمط نص المقطع، بحيث يختلف عن النص الباقي. هذا مثال:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　هنا كلمة <tspan style="font-weight: bold;">عريضة</tspan>.
</text></svg>

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

تحريك الأسطر العليا و السفلية

يمكنك استخدام خاصية baseline-shift من CSS لإنشاء علامات فوق الاسم و تحت الاسم باستخدام علامة التبويب <tspan> . هذا مثال على baseline-shift في SVG، يوضح كيفية:

<svg width="500" height="100">　　　　
<text x="10" y="20">　　　　
هذا نص يحتوي على <tspan style="baseline-shift: super;">العلوي</tspan>　　　　
هذا نص يحتوي على <tspan style="baseline-shift: sub;">السفلي</tspan> مختلط مع العادي　　　　
text.　　　　
</text>　　　　
</svg>

هذه هي الصورة المولدة. (ملاحظة: قد لا يدعمها firefox)