SVG مسار - <مسار>
و <path> يستخدم عنصر لتحديد المسار.
تتوفر الأوامر التالية للحصول على بيانات مسار:
- M = MoveTo ل
- L = lineto
- H = lineto الأفقي
- V = lineto الرأسي
- C = curveto
- S = curveto على نحو سلس
- س = منحنى بيزيه من الدرجة الثانية
- T = سلس الدرجة الثانية بيزيه curveto
- A = قوس بيضاوي الشكل
- Z = closepath
Note: جميع الأوامر أعلاه يمكن أيضا أن أعرب بأحرف أقل. حروف يعني وضع على الاطلاق، وحالات أقل يعني وضع نسبيا.
مثال 1
يحدد المثال التالي المسار الذي يبدأ في موقف 150،0 مع خط لوضع 75200 ثم من هناك، خط ل225200 وإغلاق أخيرا الطريق إلى 150،0:
هنا هو رمز SVG:
مثال
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
انها محاولة لنفسك » مثال 2
يتم استخدام منحنيات بيزيه لنموذج منحنيات ناعمة التي يمكن زيادتها إلى أجل غير مسمى. عموما، يمكن للمستخدم باختيار اثنين من النهاية واحد أو اثنين من نقاط المراقبة. ويسمى منحنى بيزيه مع نقطة مراقبة واحدة منحنى بيزيه من الدرجة الثانية ويسمى هذا النوع مع نقطتي سيطرة مكعب.
المثال التالي على إنشاء منحنى بيزيه من الدرجة الثانية، حيث A و C هي بداية ونهاية نقاط، B هو نقطة التحكم:
هنا هو رمز SVG:
مثال
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
انها محاولة لنفسك » مجمع؟ نعم فعلا!!!! بسبب التعقيد في مسارات الرسم ينصح بشدة لاستخدام محرر SVG لخلق رسومات معقدة.