التصميم الجرافيكي المتجه للتحجيم (SVG) مع CSS

سنواصل اليوم مناقشتنا على Scalable Vector Graphic (SVG) ، وكما أشرنا في منشورنا السابق ، فإن إحدى مزايا استخدام SVG هي أنه يمكن تصميمه باستخدام CSS.

SVG خصائص التصميم

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

على سبيل المثال, في عنصر HTML العادي ، يمكننا إضافة لون الخلفية إما باستخدام لون الخلفية أو خلفية خاصية CSS. في SVG ، يختلف الأمر قليلاً. لون الخلفية محدد مع ملء الملكية بدلا من ذلك. أيضا ، يتم تحديد حدود العنصر مع السكتة الدماغية الملكية وليس مع الحدود كما فعلنا في HTML العادي ، يمكنك رؤية القائمة الكاملة هنا.

إذا كنت تعمل مع محرر متجه مثل Adobe Illustrator لفترة طويلة ، فيمكنك تخمين أن آلية تسمية الممتلكات في SVG نشأت بسرعة من المحرر.

تطبيق SVG Style

يمكننا استخدام إحدى الطرق التالية لنمط عنصر SVG ؛

سمات العرض

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

سوف يتحول المستطيل ليكون مثل لقطة الشاشة أدناه ؛

ورقة الأنماط المضمنة

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

سوف يتحول المستطيل إلى نفس النتيجة ، إلا أنه يتم تدويره أيضًا الآن ؛

ورقة النمط الداخلي

تضمين نمط SVG داخل قلم المدقة العنصر ممكن أيضًا ولا يختلف عن كيفية قيامنا بذلك على HTML العادي. يوضح هذا المثال أدناه كيف نضيف أنماطًا داخلية للتأثير على عناصر SVG في .أتش تي أم أل وثيقة.

ومع ذلك ، فإن SVG هي لغة قائمة على XML ، لذلك عندما نكون على وشك إضافة ورقة أنماط مضمّنة في .SVG المستند ، نحن بحاجة إلى وضع إعلان الأنماط داخل CDATA, على النحو التالي؛

ال CDATA هنا مطلوب ، لأن CSS يمكن أن يكون > الحرف الذي سيتعارض مع موزعي XML. عن طريق CDATA يوصى بشدة بتضمين النمط في SVG ، حتى إذا لم يتم إعطاء الحرف المتعارض في ورقة الأنماط.

ورقة النمط الخارجي

تعمل ورقة الأنماط الخارجية بنفس الطريقة لعناصر SVG في .أتش تي أم أل وثيقة.

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

عناصر التجميع

يمكن تجميع عناصر SVG مع جزء. سوف تسمح لنا عناصر التجميع بمشاركة الأنماط الشائعة لجميع العناصر في المجموعة ، هذا مثال على ذلك ؛

سيكون لكل من المستطيل والدائرة نفس النتيجة.

الفكر النهائي

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

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