SVG <المستطيل>

SVG الأشكال

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

• المستطيل <rect>
• دائرة <circle>
• القطع الناقص <ellipse>
• خط <line>
• شكل متعدد الخطوط <polyline>
• المضلع <polygon>
• مسار <path>

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

SVG مستطيل - <rect>

مثال 1

و <rect> يستخدم عنصر لإنشاء مستطيل والاختلافات في شكل مستطيل:

هنا هو رمز SVG:

Code explanation:

• العرض والارتفاع سمات <rect> عنصر تحدد ارتفاع و عرض المستطيل
• و style يستخدم السمة لتعريف خصائص CSS للمستطيل
• الخاصية CSS ملء تحدد لون تعبئة المستطيل
• الخاصية CSS السكتة الدماغية عرض تحدد عرض حدود المستطيل
• الخاصية CSS السكتة الدماغية تحدد لون حدود المستطيل

مثال 2

دعونا ننظر في مثال آخر يحتوي على بعض السمات الجديدة:

هنا هو رمز SVG:

Code explanation:

• في x تحدد سمة الموقف الأيسر من المستطيل (على سبيل المثال س = "50" يضع بكسل مستطيل 50 من الهامش الأيسر)
• و y تحدد سمة الموقف العلوي من المستطيل (على سبيل المثال ذ = "20" يضع بكسل مستطيل 20 من الهامش العلوي)
• تحدد خاصية CSS ملء التعتيم غموض لون التعبئة (legal range: 0 to 1)
• تحدد خاصية CSS السكتة الدماغية غموض غموض اللون السكتة الدماغية (legal range: 0 to 1)

مثال 3

تحديد التعتيم للعنصر كله:

هنا هو رمز SVG:

Code explanation:

• الخاصية CSS التعتيم تحدد قيمة التعتيم للعنصر كله (legal range: 0 to 1)

مثال 4

المثال الأخير، وإنشاء مستطيل مع زوايا مدورة:

هنا هو رمز SVG:

Code explanation:

• وآر إكس و ry سمات تقريب زوايا المستطيل