SVG <rect>

يحتوي SVG على بعض العناصر المسبقة التحديد للشكل التي يمكن للمطورين استخدامها وتعاملها.

شكل SVG

يحتوي SVG على بعض العناصر المسبقة التحديد للشكل التي يمكن للمطورين استخدامها وتعاملها:

  • مستطيل <rect>
  • دائرة <circle>
  • oval <ellipse>
  • خط <line>
  • خط مستقيم <polyline>
  • مثلث <polygon>
  • مسار <path>

سوف نشرح هذه العناصر لك، نبدأ أولاً ببداية العنصر المستطيل.

<rect> العلامة

<rect> يمكن استخدامه لإنشاء مستطيلات ومراكز المستطيلات المختلفة.

لفهم كيفية عمله، قم بنسخ هذه الأوامر إلى ملف الملاحظات ثم احفظها كملف "rect1.svg". أضف هذا الملف إلى مجلد الويب:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

توضيح الكود:

  • يمكن لخصائص width و height في علامة rect تحديد طول وعرض المستطيل
  • يستخدم السمة style لتحديد خصائص CSS
  • يحدد خصائص fill في CSS لون الحشوة المستطيل (قيم rgb أو اسم اللون أو قيمة بصري)
  • يحدد خصائص stroke-width في CSS عرض حواف المستطيل
  • يحدد خصائص stroke في CSS لون حواف المستطيل

انظر إلى هذا المثال

دعونا نرى مثالاً آخر يحتوي على خصائص جديدة:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

شرح المثال:

  • يحدد السمة x موقع الجانب الأيسر المستطيل (على سبيل المثال، x="0" يحدد المسافة بين المستطيل وبداية نافذة المتصفح 0px)
  • يحدد السمة y موقع القمة المستطيل (على سبيل المثال، y="0" يحدد المسافة بين المستطيل وبداية نافذة المتصفح 0px)
  • يحدد خصائص fill-opacity في CSS شفافية لون الحشوة (المجال المقبول هو: 0 - 1)
  • يحدد خصائص stroke-opacity في CSS شفافية لون الحواف (المجال المقبول هو: 0 - 1)

رؤية المثال

يحدد السمة الشفافية لكل عنصر

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

توضيح الكود:

يحدد خاصية opacity في CSS قيمة الشفافية للعنصر كله (المجال الصالح هو: 0 - 1)

رؤية المثال

مثال النهاية، إنشاء مثلثات منحنية الزوايا:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

توضيح الكود:

خصائص rx و ry تجعل المثلثات تظهر بزوايا منحنية.

رؤية المثال