رسم دائرة باستخدام SVG <circle>

عنصر <circle> في SVG هو شكل أساسي في SVG، ويستخدم لإنشاء دوائر، بناءً على مركز دائري وأبعاد دائرية، ويستطيع أيضًا استخدام stroke و fill لرسم الحواف المستقيمة، الحواف المتقطعة، وتعبئة اللون في الدائرة.

يستخدم عنصر <circle> في SVG لرسم الدوائر. هذا مثال بسيط:

<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>

هذه هي صورة النتيجة

تكون هذه الدائرة مركزها نقطة cx, cy، وعرضها r. هي خصائص عنصر <circle>.

رسم حواف الدائرة

يمكنك استخدام خاصية style stroke لضبط لون الحواف في SVG الدائرة. في المثال الأول على هذه الصفحة، تم ضبط الخطوط على اللون الأخضر الداكن #006600. ولكن، يمكنك أيضًا ضبط المزيد. يمكنك أيضًا استخدام خاصية stroke-width style لضبط عرض الخطوط. هذا مثال:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　fill:#00cc00"/></svg>

يبدو مظهر الدائرة بعد التشغيل كالتالي:

يمكنك أيضًا استخدام خاصية stroke-dasharray لرسم حواف بالخطوط المتقطعة. هذا مثال:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　stroke-dasharray: 10 5;
　　　　　　　　　　　fill:#00cc00"/></svg>

يبدو مظهره بعد التشغيل كالتالي:

يمكنك أيضًا حذف حواف الدائرة (الشكل) وتعبئة الدائرة فقط بلون التعبئة. على سبيل المثال، الكود التالي:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00"/></svg>

يبدو مظهر الدائرة بدون حواف بعد التشغيل كالتالي:

تعبئة الدائرة

يتحكم خاصية fill style في طريقة تعبئة الدائرة. بإمكانك اختيار عدم التعبئة على الإطلاق باستخدام none.
على سبيل المثال:

يبدو مظهر الدائرة بدون تعبئة كالتالي:

يمكنك استخدام خاصية fill لضبط لون التعبئة، كما ذكر في هذا النص، على سبيل المثال، الكود التالي:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

يبدو مظهر رسم الدائرة وتعبئتها باللون كالتالي:

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

<svg height="80px">
　　　　<circle cx="40" cy="40" r="24" style="stroke: #660000;
　　　　　　　　　　　　　　　　　　　fill: #cc0000;
　　　　　　　　　　　　</circle>
　　　　<circle cx="64" cy="40" r="24" style="stroke: #000099;
　　　　　　　　　　　　　　　　　　　fill: #0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity: 0.5;
　　　　　　　　　　　　</circle>
</svg>

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

يرجى ملاحظة، الآن دائرة الزرقاء (اليمين) شفافة في الداخل. لتجعل الخطاف شفافًا أيضًا، يجب استخدام خاصية stroke-opacitystyle.