رسم مستطيل باستخدام SVG <rect>

عنصر rect هو شكل أساسي في SVG، يُستخدم لإنشاء مستطيلات بناءً على زاوية معينة وأبعادها. يمكن استخدامه أيضًا لإنشاء مستطيلات مستديرة.

يُمثل عنصر <rect> في SVG مستطيلاً. يمكن استخدام هذا العنصر لرسم مستطيلات بجميع الأحجام، وألوان الشريط والملء، وأشكال الزوايا المستديرة أو غير المستديرة.

مثال على الإنترنت

مثال على استخدام rect

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect x="10" y="10" height="100" width="100"
　　　　　　　　style="stroke:#006600; fill: #00cc00"/></svg>

تحدد موقع المستطيل الخاصية x و y. تذكر أن هذا الموقع هو بالنسبة إلى أي عنصر م封装 (العمودية) آخر.
تحدد أبعاد المستطيل الخاصية width و height.
تسمح خاصية style بتعيين معلومات النمط الأخرى، مثل لون الخط وملء اللون، عرض الخط وما إلى ذلك. سيتم شرح ذلك بشكل مفصل في نص آخر.
هذه هي صورة المستطيل التي تم إنشاؤها:

مستطيلات مستديرة

يمكن رسم زوايا مستديرة على المستطيل. تحدد الخاصية rx و ry الزوايا المستديرة في الزوايا. تحدد خاصية rx عرض الزاوية المستديرة، بينما تحدد خاصية ry طول الزاوية المستديرة. هناك ثلاثة مستطيلات مع rx و ry كل منهما على التوالي 5، 10 و 15. لاحظ الاختلاف في الأحجام عند التبديل.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="50" width="50"
　　　　　　　　　　rx="5" ry="5"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect x="70" y="10" height="50" width="50"
　　　　　　　　　　rx="10" ry="10"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect x="130" y="10" height="50" width="50"
　　　　　　　　　　rx="15" ry="15"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
</svg>

هذا هو تأثير دائرة المستطيل التي تم إنشاؤها:

في هذه الأمثلة، يتم تعيين قيم rx و ry في كل مستطيل إلى نفس القيمة. إذا تم تعيين خاصية rx فقط، فإن خاصية ry ستتحصل على نفس القيمة rx. هذا هو الطريقة السريعة لتعريف الزوايا المستديرة المتساوية.
هذا مثال لكل منهما قام بتعيين خاصية rx إلى 10، ولكن قام بتعيين خاصية ry على التوالي إلى 5 و15. هذا سيظهر لك كيف يبدو شكل المثلثات الحادة في أبعاد مختلفة من العلو والعرض.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="50" width="50"
　　　　　　　　　　rx="10" ry="5"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
　　　　<rect x="130" y="10" height="50" width="50"
　　　　　　　　　　rx="10" ry="15"
　　　　　　　　　　style="stroke:#006600; fill: #00cc00"/>
</svg>

حروف الرقبة

يمكنك استخدام خاصية SVG stroke style لضبط نمط حواف الرقبة. في هذا المثال، تم تعيين لون stroke إلى أخضر داكن، وتم تعيين عرض الحواف إلى 3:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect x="20" y="20" width="100" height="100"
　　　　　　style="stroke: #009900;
　　　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　　　fill: #009900;
　　　　　　"
　　　　　　</svg>

إليك كيف يظهر العنصر في المتصفح عند عرض rect، الشكل التالي هو:

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect x="20" y="20" width="100" height="100"
　　　　　　style="stroke: #009900;
　　　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　　　stroke-dasharray: 10 5;
　　　　　　　　　　　　　fill: #009900;
　　　　　　　　　　　　"
　　　　　　　　</svg>

تظهر النتيجة التالية للكود أعلاه::

ملء الرقبة

يمكنك استخدام خاصية SVG fill style لملء الرقبة. على سبيل المثال، يمكنك اختيار عدم ملء العنصر عن طريق تعيين خاصية style fill إلى none.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect x="20" y="20" width="100" height="100"　
　　　　　　　　　　　　style="stroke: #009900;fill: none;"　/></svg>

هذا هو الشكل الذي يظهر به rect في المتصفح عند عدم تلوينه:

يمكنك أيضًا اختيار تلوين الرقبة باللون. في هذا المثال، يتم تلوين rect بلون أخضر فاتح:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect x="20" y="20" width="100" height="100"
　　　　　　style="stroke: #009900;fill: #33ff33;"/>
</svg>

إليك كيف يظهر rect بعد تلوينه في المتصفح:

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="20" width="100" height="100"
　　　　　　style="stroke: #009900;
　　　　　　　　　fill: #33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect x="50" y="50" width="100" height="100"
　　　　　　style="stroke: #000099;
　　　　　　　　　fill: #3333ff;
　　　　　　　　　fill-opacity: 0.5;
　　　　　　　　"
　　　　　　　　</svg>

هذا هو مظهر نصف شفاف للعنصر عند ظهوره في المتصفح:

في هذا المثال، لم يكن خط الرسم للثانى مستطيل شفاف، ولكن يمكنك استخدام خاصية stroke-opacity في style لجعله شفافًا.