دليل SVG

عناصر SVG

أسلوب CSS لـ SVG

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

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

استخدام خصائص النمط CSS

هل يمكن استخدام خصائص النمط المحددة (مثل stroke و fill) لتشكيل أنماط أشكال SVG. إليك مثال:

مثال

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle　cx="40"　cy="40"　r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

اختبار لرؤية‹/›

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

استخدام خاصية style وخصائص CSS

هذه الطريقة لا تستخدم أي خاصية نمط محددة. بدلاً من ذلك، تستخدم خاصية style وتحدد فيها خصائص CSS. إذا كنت بحاجة إلى تعيين النمط مباشرة في النص، فإن هذه الطريقة أفضل من الخصائص المحددة لأنك يمكنك تعلم أسماء خصائص CSS. خصائص CSS في جدولات النصوص الداخلية والخارجية هي نفسها، لذا فإن نسخ ولصق التعلم أمر سهل.

هذا دائرة تم تعيين الحواف والملء باستخدام خاصية style وخصائص CSS:

مثال

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40"　cy="40"　r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

اختبار لرؤية‹/›

استخدام جدولات النصوص المدمجة

يمكنك تعريف نمط الشكل في جدولات النصوص المدمجة، ثم تطبيق جميع هذه النمط على الشكل تلقائيًا. إليك مثال:

مثال

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40"　cy="40"　r="24"/>
</svg>

اختبار لرؤية‹/›

لاحظ كيف يتم تعريف نمط عناصر <style> الداخلية. هذا يشبه الطريقة التي تعمل بها في HTML و CSS.

تعمل جدولات النصوص الداخلية بشكل طبيعي في متصفح Internet Explorer 7 و Firefox 3.0.5.

النتيجة تبدو كالتالي:

خاصية class

يمكن استخدام خاصية class لتحديد نمط الشكل بدلاً من تطبيق النمط على جميع أنواع الشكل المحددة (مثل جميع الدوائر). مثل استخدام خاصية class في عناصر HTML.

هذه عينة من نوعين من الدوائر - الأخضر والأحمر.<circle>يُستخدم الخاصية class التالية لتطبيق كل نمط على العنصر المناسب منهما :

مثال

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40"　cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40"　cy="100"　r="24"/>
</svg>

اختبار لرؤية‹/›

لاحظ، كيف أن اسم الملف المحدد في جدول الأنماط يحتوي على اختصار .myGreen و .myRed. الآن، يمكن استخدام element <circle> باستخدام class="myGreen" لتحديد لون الأعمدة أو class="myRed" لتحديد نمط الدائرة الحمراء.

استخدام جدول الأنماط الخارجي

عند استخدام جدول الأنماط الخارجي، يتم وضع جدول الأنماط في ملف منفصل ثم في خادم الويب، مثل ملف CSS الخارجي للصفحة HTML. بالإضافة إلى ذلك، يجب أن تحتوي ملف SVG على الإعلان التالي قبل عنصر <svg>:

مثال

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>

هذه التعليمات البرمجية تخبر مشاهد SVG باستخدام جدول الأنماط CSS للبحث عن ملف "svg-stylesheet.css".

هذا مثال على استخدام التبرير في ملف SVG:

مثال

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>
<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24"
　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

ملاحظة: يبدو أن جدول الأنماط الخارجي يعمل بشكل طبيعي في متصفح Internet Explorer 7، لكنه لا يعمل في Firefox 3.0.5.

استخدام جدول الأنماط في صفحة HTML.

إذا تم دمج صورة SVG داخل صفحة HTML، يمكنك أيضًا دمج جدول الأنماط لصورة SVG داخل صفحة HTML. إليك مثال:

مثال

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

اختبار لرؤية‹/›

لإضافة النمط إلى الأشكال الموجودة في صورة SVG، يكفي إضافة خصائص CSS العادية داخل عنصر style. يمكنك استخدام مسبق التكوين CSS الخاص بـ HTML لضبط النمط للاعتبارات SVG. هذه صفحة HTML، حيث يتم ضبط نمط عنصر circle باستخدام جدول الأنماط CSS الخاص بالصفحة HTML:

مثال

<html>
<body>
<style>
　　circle {
　　　　　stroke: #006600;
　　　　　fill : #00cc00;
　　}
</style>
<svg>
　　<circle cx="40" cy="40" r="24" />
</svg>
</body>
</html>

اختبار لرؤية‹/›

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

تغطية جدول النمط المحلي

إذا تم تعيين النمط في جدول النمط، يمكن تغطية هذا النمط من خلال تعيين الخاصية الجديدة للنمط المحلي في الشكل الذي يتم تعيين النمط الجديد عليه. دائمًا ما يكون النمط المحلي داخل الشكل له الأولوية على النمط المحدد في النمط الداخلي أو الخارجي.

خصائص SVG CSS

يحتوي عنصر SVG على خصائص CSS يمكن تعيينها. ليس لكل عنصر جميع هذه الخصائص. لذلك، يتم تقسيم خصائص CSS إلى عدة جداول لمختلف العناصر.

خصائص الشكل CSS

الخصائص CSS للعناصر path وغيرها من عناصر الشكل:

خصائص CSS	الوصف
fill	إعداد لون التعبئة للشكل.
fill-opacity	إعداد شفافية التعبئة للشكل.
fill-rule	إعداد قاعدة التعبئة للشكل.
marker	إعداد العلامة المستخدمة على هذا الشكل.
marker-start	إعداد علامة البداية المستخدمة على هذا الشكل.
marker-mid	إعداد علامة الوسط المستخدمة على هذا الشكل.
marker-end	إعداد علامة النهاية المستخدمة على هذا الشكل.
stroke	إعداد لون خط ملامح هذا الشكل.
stroke-dasharray	إعداد الخطوط الملامح المضلعة.
stroke-dashoffset	إعداد تأثير التباين للخطوط الملامح.
stroke-linecap	إعداد نهاية الخطوط الملامح. القيم المقبولة هي round،butt وsquare.
stroke-miterlimit	إعداد حد الزاوية للخطوط الملامح.
stroke-opacity	إعداد شفافية خط ملامح هذا الشكل.
stroke-width	إعداد عرض خط ملامح هذا الشكل.
text-rendering	إعداد النص للرسم ملامح هذا الشكل.

خصائص النص CSS

الخصائص CSS للنص:

خصائص CSS	الوصف
alignment-baseline	ضبط موقع النص باستخدام إحداثيات التزامن x و y.
baseline-shift	ضبط إزاحة الخط المستخدمة لعرض النص.
dominant-baseline	ضبط الخط الرئيسي الأساسي.
glyph-orientation-horizontal	ضبط اتجاه النص الأفقي.
glyph-orientation-vertical	ضبط اتجاه النص الرأسي.
kerning	ضبط مسافة الحروف (مسافة الحروف هي مسافة بين الأحرف).

خصائص CSS للتدرج

خصائص CSS للتدرجات SVG:

خصائص CSS	الوصف
stop-color	ضبط اللون النهائي المستخدم في العنصر stop المستخدم في التدرج.
stop-opacity	ضبط عدم الشفافية في العناصر المستخدمة في التدرج.

خصائص stroke لـ SVG عنصر SVG <use>