رسم خط منحني باستخدام SVG <polyline>

يُستخدم عنصر polyline كشكل أساسي في SVG لإنشاء سلسلة من الخطوط التي تربط عدة نقاط. عادةً ما يستخدم polyline لإنشاء شكل مفتوح، حيث لا يربط النقطة الأخيرة بالنقطة الأولى

مثال على الخطوط الملتوية

مثال على شيفرة الخطوط الملتوية كما يلي:

<svg　width="120"　height="120"　
　　　　　viewPort="0　0　120　120"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"
　　　　<polyline　fill="none"　stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

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

رسم مثلث

مثال على الشيفرة كما يلي:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

صورة عرض النتائج بعد التشغيل:

المسارات متعددة معروضة بنقاط. كل نقطة يتم عرضها في سمة points بـ x،y. في هذا المثال هناك 3 نقاط، وتحدد هذه النقاط مثلثًا.
ربط 3 نقاط بأسلاك ثم ملؤها. لون الملء الافتراضي هو الأسود.

رسم مثلث ملون بالأخضر

مثال على الشيفرة كما يلي:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

صورة عرض النتائج بعد التشغيل:

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

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　60,2　35,52　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

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