العمل مع النص في رسومات المتجهات القابلة للتحجيم (SVG)

في مشاركاتنا السابقة ، استخدمنا SVG لإنشاء أشكال. في هذا المنشور ، كما قال العنوان ، سوف ننظر إلى إنشاء نص باستخدام SVG. هناك الكثير من الأشياء التي يمكننا القيام بها باستخدام نص يتجاوز ما يمكن لنص HTML العادي القيام به.

لذلك ، دعونا نتحقق منها.

التنفيذ الأساسي

ولكن ، قبل أن نمضي إلى أبعد من ذلك ، دعونا نرى كيف النص في SVG يتكون في مستواه الأساسي للغاية:

يتم تعريف النص الموجود في SVG ، كما ترون من مقتطف الشفرة أعلاه ، بعلامة منطقية كافية, . هذا العنصر يتطلب أساسا فقط س و ذ سمات لتحديد الإحداثيات الأساسية.

مصدر الصورة: Wikipedia.org

وهنا كيف سيبدو النص. في الوقت الحالي يبدو أنه لا يوجد فرق مع النص العادي في HTML.

أنماط النص الأساسية

يمكن أيضا نص مع خصائص CSS مثل الخط الوزن, نوع الخط, و النص الديكور والتي يمكن تنفيذها إما من خلال مضمنة ، على غرار الداخلية أو على غرار الخارجي كما ناقشنا في الوظيفة السابقة حول تصميم SVG مع CSS. فيما يلي بعض الأمثلة.

بالخط العريض

 هذا هو النص في Scalable Vector Graphic (SVG) 

مائل

 هذا هو النص المائل في Scalable Vector Graphic (SVG) 

أكد

 يتم تسطير هذا النص في Scalable Vector Graphic (SVG) 

جزء

في بعض الحالات ، عندما نريد فقط تطبيق أنماط أو سمات على جزء معين من النص ، يمكننا استخدام . يوضح هذا المثال أدناه كيف نضيف بالخط العريض, مائل و أكد إلى سطر واحد من النص.

 هذا جريء, هذا مائل و هذا هو التسطير 

وضع الكتابة

النص لا يكتب فقط من من اليسار إلى اليمين. في أجزاء أخرى من العالم ، اليابان على سبيل المثال ، يتم كتابة النص من من اعلى لاسفل. في SVG ، يمكن القيام بذلك باستخدام الكتابة الوضع صفة، عزا.

 ぁ ぃ ぅ ぇ ぉ か き  

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

مخطط النص

النص في SVG هو في الأساس رسم, حتى نتمكن من تطبيق أيضا السكتة الدماغية السمة لإضافة خط حد إلى النص تمامًا كما فعلنا مع الأشكال الأخرى.

في مقتطف الشفرة أعلاه ، أضفنا السكتة الدماغية السمة إلى عنصر وإزالة لون النص عن طريق تحديد ملء يعزو إلى لا شيء والتي سوف تؤدي إلى عرض النص التالي.

مسار النص

في SVG ، لا يمكن عرض النص أفقيًا وعموديًا فحسب ، بل يمكن أيضًا عرضه اتبع نمط المسار. هنا هو كيفية القيام بذلك.

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

ثم ، ضع عنصر داخل جزء. defs هنا يعني التعريف.

لاحظ أننا أضفنا أيضًا هوية شخصية السمة إلى . الآن ، نحن بحاجة فقط لربط المسار هوية شخصية إلى نصنا مع عنصر ، مثل ذلك ؛

    أبجد هوز دولور الجلوس اميت consectetur.   

قراءة متعمقة: مسارات SVG

تدرج النص

إضافة خلفية لملء النص تكون ممكنة أيضًا في SVG ، وإذا كنت قد نجحت في قسم مسار النص أعلاه ، فسيكون ذلك أسهل كثيرًا.

أولاً ، نحن بحاجة إلى تحديد ألوان التدرج.

عند إعداد جميع التعاريف اللازمة ، نحتاج الآن فقط لإضافة النص وإحالة ملء السمة إلى التدرج هوية شخصية السمة ، على النحو التالي ؛

 الانحدار 

وهنا هو ، النص مع التدرج.

قراءة متعمقة: SVG التدرج والنمط

مزيد من المراجع

النص في SVG قوي بلا شك ، هناك في الواقع العديد من الأشياء التي يمكننا القيام بها بما يتجاوز ما يمكننا استيعابه في هذا المنشور. لذلك ، قمنا بتجميع بعض المراجع أدناه لخدمة اهتمامك بهذا الموضوع.

• حول الخطوط في SVG - ديفيا مانيان
• SVG Text الوثائق الرسمية - W3.org
• SVG Dovumentation في Mozilla Dev. شبكة مع أمثلة وأدوات - MDN
• SVG سمة وضع الكتابة - MDN

• عرض تجريبي
• تحميل المصدر