SVG <صحيح>
أشكال SVG
يحتوي SVG على بعض عناصر الشكل المحددة مسبقًا التي يمكن للمطورين استخدامها:
- مستطيل <صحيح>
- دائرة <دائرة>
- القطع الناقص <القطع الناقص>
- خط <خط>
- متعدد الخطوط <بوليلين>
- مضلع <مضلع>
- المسار <path>
ستشرح الفصول التالية كل عنصر ، بدءًا من العنصر المستقيم.
مستطيل SVG - <صحيح>
مثال 1
يُستخدم العنصر <rect> لإنشاء مستطيل وأشكال مختلفة لشكل مستطيل:
هذا هو رمز SVG:
مثال
<svg width="400" height="110">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
شرح الكود:
- تحدد سمات العرض والارتفاع لعنصر <rect> ارتفاع وعرض المستطيل
- تُستخدم سمة النمط لتعريف خصائص CSS للمستطيل
- تحدد خاصية التعبئة CSS لون تعبئة المستطيل
- تحدد خاصية عرض الحد في CSS عرض حدود المستطيل
- تحدد خاصية CSS Stroke لون حدود المستطيل
مثال 2
لنلقِ نظرة على مثال آخر يحتوي على بعض السمات الجديدة:
هذا هو رمز SVG:
مثال
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
شرح الكود:
- تحدد السمة x الموضع الأيسر للمستطيل (على سبيل المثال ، x = "50" يضع المستطيل 50 بكسل من الهامش الأيسر)
- تحدد السمة y الموضع العلوي للمستطيل (على سبيل المثال ، y = "20" يضع المستطيل 20 بكسل من الهامش العلوي)
- تحدد خاصية Fill-opacity لـ CSS عتامة لون التعبئة (النطاق القانوني: 0 إلى 1)
- تحدد خاصية عتامة الحد في CSS عتامة لون الحد (النطاق القانوني: 0 إلى 1)
مثال 3
حدد عتامة العنصر بأكمله:
هذا هو رمز SVG:
مثال
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
شرح الكود:
- تحدد خاصية عتامة CSS قيمة العتامة للعنصر بأكمله (النطاق القانوني: 0 إلى 1)
مثال 4
أخيرًا ، قم بإنشاء مستطيل بزوايا دائرية:
هذا هو رمز SVG:
مثال
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
شرح الكود:
- تدور سمات rx و ry حول زوايا المستطيل