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

عنصر SVG <line> هو شكل أساسي في SVG، يستخدم لإنشاء خط يربط بين نقطتين. يتم استخدام عنصر <line> لرسم خطوط داخل صورة SVG. يمكن رسم خطوط مستقيمة، خطوط عمودية، خطوط مائلة، إلخ

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

فيما يلي بعض الأمثلة الشائعة البسيطة ل رسم خطوط SVG <line>:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>
　　　　　　　　<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line>
　　　　　　　　<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
</svg>

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

يبدأ الخط عند النقطة المحددة من قبل سمتبيانات x1 وy1
يتم إنهاء الخط عند النقطة المحددة من قبل سمتبيانات x2 وy2
يحدد هذا السلوك الخاص باللون والسمك للخط (النقش)