تعليمية SVG

عنصر SVG

رسم خط مستقيم باستخدام SVG <line>رسم دائرة باستخدام SVG <circle>

رسم بيضاوي باستخدام SVG <ellipse>

يستخدم عنصر <ellipse> في SVG لرسم oval. oval هو دائرة غير متساوية في الطول والعرض. بمعنى آخر، نصف القطر في اتجاه x و y مختلفان.

مثال oval SVG

هذا هو مثال على رمز رسم oval:

مثال

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15"
　　　　　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

اختبار لـ ‹/›

النتيجة بعد التشغيل كالتالي:

cx و cy في oval مثل الدائرة تعمل بشكل مركزي. ولكن في اتجاه x و y، يتم تحديد نصف القطر من خصائص اثنين وليس واحدة فقط: rx و ry. مثلما ترون أن rx له قيمة أعلى من ry، مما يجعل oval أوسع من ارتفاعه. عند ضبط rx و ry على نفس القيمة، يتم إنشاء دائرة.

ضبط عرض حافة

يمكنك استخدام خاصية stroke-width في style لضبط عرض حدود oval. مثال:

مثال

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width: 5;fill: none;"/>
</svg>

اختبار لـ ‹/›

صورة النتيجة بعد التشغيل كالتالي:

oval حافات شرطية

يمكنك أيضًا استخدام خاصية stroke-dasharray في style لجعل خطوط oval تصبح شرطية.

مثال

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width: 5;
　　　　　　　　　stroke-dasharray: 10 5;fill: none;"/>
</svg>

اختبار لـ ‹/›

في هذا المثال، تم ضبط عرض الخط العريض على 10، وعدد الفواصل بين الخطوط العريضة (الفراغ بين الخطوط العريضة) على 5. هذا هو مظهر oval عند الرسم:

حافة شفافة

يمكنك استخدام خاصية stroke-opacity في style لجعل حدود oval SVG شفافة.

مثال

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　fill: none;
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　stroke-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　fill: none;
</svg>

اختبار لـ ‹/›

بعد تشغيل الكود، يبدو تأثير oval SVG كالتالي:

لاحظ أن oval الثاني (الأزرق) شفاف، وكيف يمكن رؤية oval الأحمر من خلال خطوطه.

ملء oval

يمكنك استخدام خاصية fill لملء oval:

مثال

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

اختبار لـ ‹/›

بعد تشغيله، يبدو شكل oval SVG كالتالي:

ملء شفاف

استخدام خاصية fill-opacity يمكن استخدامه لضبط درجة شفافية اللون المملوء للoval

مثال

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill: none;
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;
</svg>

اختبار لـ ‹/›

يبدو البيضاوي عند التشريح كالتالي:

لاحظ أن البيضاوي الثاني (الأزرق) شفاف جزئيًا، مما يجعل البيضاوي الأحمر مرئيًا.

رسم خط مستقيم باستخدام SVG <line>رسم دائرة باستخدام SVG <circle>