تعليق: إحدى القدرات القوية لـ SVG هي أنه يمكن التحكم في النص إلى مستوى يستحيله على صفحات HTML القياسية دون طلب المساعدة في الصور أو غيرها من المكونات الإضافية. على الرغم من أن تقديم نص SVG قوي للغاية ، إلا أنه لا يزال هناك عيب واحد: لا يمكن لـ SVG إجراء تغليف خط تلقائي. بعد ذلك ، قدم عرض النص في SVG. يمكن للأصدقاء المهتمين التعرف على ذلك ، والذي قد يكون مفيدًا.
تقديم النص في SVG
تتمثل إحدى القدرات القوية لـ SVG في أنه يمكن التحكم في النص إلى مستوى يستحيله على صفحات HTML القياسية دون اللجوء إلى الصور أو الإضافات الأخرى. يمكن تنفيذ أي إجراء يمكن تنفيذه على شكل أو مسار (مثل الرسم أو التصفية) على النص. على الرغم من أن تقديم نص SVG قوي للغاية ، إلا أنه لا يزال هناك عيب واحد: لا يمكن لـ SVG إجراء تغليف خط تلقائي. إذا كان النص أطول من المساحة المسموح بها ، فما عليك سوى قطعه. في معظم الحالات ، يتطلب إنشاء خطوط نصية متعددة عناصر نصية متعددة.
بالإضافة إلى ذلك ، يمكنك استخدام عنصر Tspan لتقسيم عنصر النص إلى أقسام ، مما يسمح لكل قسم أن يكون له نمط خاص به.
أيضًا ، في العناصر النصية ، تشبه معالجة المساحات HTML: تصبح فواصل الخط وإرجاع النقل مسافات ، بينما يتم ضغط المساحات المتعددة في مساحة واحدة.
النص المعروض مباشرة في الصورة - عنصر النص
لعرض النص مباشرة ، يمكنك استخدام العناصر النصية ، على النحو التالي:
<svg>
<rect fill = "red" />
<circle cx = "150" cy = "100" r = "80" fill = "green" />
<text x = "150" y = "125" font-size = "60" text-anchor = "middle" fill = "white"> svg </text>
</svg>
كما هو موضح في المثال أعلاه ، يمكن لعنصر النص تعيين الخصائص التالية:
x ، y هي إحداثيات موضع النص. النصي هو اتجاه عرض النص ، وهو في الواقع الموضع (x ، y) في موضع النص. تحتوي هذه الخاصية على ثلاث قيم: ابدأ ، منتصف ونهاية. يعني البداية أن إحداثيات موضع النص (x ، y) موجودة في بداية النص ، ويبدأ النص من هذه النقطة إلى اليمين. توجد الوسائل الوسطى (x ، y) في منتصف النص ، ويتم عرض النص في الاتجاهات اليسرى والأيمن ، والذي يتركز بالفعل. تعني النهاية أن (x ، y) نقاط في نهاية النص ، ويتم عرض النص واحدًا تلو الآخر إلى اليسار.بالإضافة إلى هذه الخصائص ، يمكن تحديد الخصائص التالية في CSS أو مباشرة في الخصائص:
ملء ، السكتة الدماغية: ملء وألوان السكتة الدماغية ، يتم تلخيص الاستخدام المحدد في وقت لاحق. السمات ذات الصلة للخط: الأسرة الخطية ، على طراز الخط ، والخطوط ، والخطاف المتغير ، والخطوط ، وحجم الخط ، والكراهية ، و kerning ، ومساحة الحروف ، وتباعد الكلمات ، وتبادل النص.الفاصل الزمني النص - عنصر Tspan
هذا العنصر هو مكمل قوي لعنصر النص ؛ يتم استخدامه لتقديم النص داخل فاصل. يمكن أن يظهر فقط في عنصر النص أو عناصر الطفل لعنصر Tspan. الاستخدام النموذجي هو التأكيد على عرض جزء من النص. على سبيل المثال:
<extrev>
<tspan font-weight = "bold" fill = "red"> هذا جريء وحمراء </tspan>
</text>
يحتوي عنصر TSPAN على الخصائص التالية التي يمكن تعيينها: x ، y يستخدم لتعيين قيمة الإحداثيات المطلقة للنص الموجود ، والذي سيتجاوز موضع النص الافتراضي. يمكن أن تحتوي هذه الخصائص على سلسلة من الأرقام التي يتم تطبيقها على كل حرف واحد مقابل. الأحرف التي ليس لديها إعدادات مقابلة ستتبع الحرف السابق. على سبيل المثال:
<text x = "10" y = "10"> Hello World!
<tspan x = "100 200 300" font-weight = "bold" fill = "red"> هذا جريء وأحمر </tspan>
</text>
يتم استخدام DX ، DY لتعيين إزاحة النص الموجود بالنسبة لموضع النص الافتراضي. يمكن أن تحتوي هذه الخصائص أيضًا على سلسلة من الأرقام ، يتم تطبيق كل منها على الحرف المقابل. الأحرف التي ليس لديها إعدادات مقابلة ستتبع الحرف السابق. يمكنك تغيير X من المثال أعلاه إلى DX لمعرفة التأثير. يستخدم الدوران لضبط زاوية الدوران للخط. يمكن أن تحتوي صفحة الخصائص هذه على سلسلة من الأرقام التي يتم تطبيقها على كل حرف. سيتم استخدام الأحرف التي لا تحتوي على إعدادات مقابلة إلى مجموعة الأرقام الأخيرة.
<text x = "10" y = "10"> Hello World!
<tspan rotate = "10 20 45" font-weight = "Bold" fill = "Red"> هذا جريء وأحمر </tspan>
</text>
الطول: هذه هي الممتلكات الأكثر إثارة للحيرة. يقال أنه بعد وضعه ، عندما يجد العرض أن طول النص لا يتوافق مع هذه القيمة ، سيكون هذا الطول هو الأساس. لكنني لم أجربها.
اقتباس نص - عنصر TREF
يسمح هذا العنصر بالإشارة إلى النص المحدد ونسخه بكفاءة إلى الموقع الحالي ، عادةً مع XLINK: عنصر الهدف المحدد HREF. لأنه تم نسخه ، عند استخدام CSS لتعديل النص الحالي ، لن يتم تعديل النص الأصلي. انظر مثال:
<extre> هذا نص مثال. </text>
<extrev>
<tref xlink: href = "#example" />
</text>
مسار النص - عنصر TextPath
هذا أكثر إثارة للاهتمام ، والتأثير رائع أيضًا ، ويمكنه إنتاج العديد من الآثار الفنية ؛ يأخذ هذا العنصر المسار المحدد من سمة XLink: HREF ويحاذا النص على هذا المسار ، انظر المثال:
<path d = "M 20،20 C 40،40 80،40 100،20" />
<extrev>
<textpath xlink: href = "#my_path"> يتبع هذا النص منحنى. </textpath>
</text>
عرض الصورة في SVG - عنصر الصورة
يمكن لعنصر الصورة في SVG دعم عرض الصور النقطية مباشرة ، وهو أمر سهل الاستخدام للغاية. انظر المثال التالي:
<svg>
<Image xLink: Href = "Penguins.jpg" x = "0" y = "0"/>
</svg>
بضع نقاط يجب ملاحظتها هنا:
1. إذا لم يتم تعيين إحداثيات X أو Y ، فإن الافتراضي هو 0.
2. إذا لم يتم تعيين العرض أو الارتفاع ، فإن الافتراضي هو 0.
3. إذا تم ضبط العرض أو الارتفاع بشكل صريح على 0 ، فسيتم حظر تقديم هذه الصورة.
4. يدعم تنسيق الصورة PNG ، JPEG ، JPG ، SVG ، وما إلى ذلك ، لذلك تدعم SVG SVG المتداخلة.
5.Mage هو عنصر منتظم في SVG ، تمامًا مثل العناصر الأخرى ، لذلك يدعم جميع التأثيرات مثل المحاصيل ، القناع ، التصفية ، الدوران ، إلخ.
المرجع العملي:
فهرس البرنامج النصي: (v = vs.85) .aspx
مركز التطوير: https://developer.mozilla.org/en/svg
المراجع الشعبية:
الوثائق الرسمية: