SVG <المسار>
مسار SVG - <مسار>
يستخدم عنصر <path> لتعريف المسار.
تتوفر الأوامر التالية لبيانات المسار:
- م = موفيتو
- L = لينيتو
- H = خط أفقي
- V = خط عمودي
- C = انحناء
- S = انحناء سلس
- Q = منحنى بيزير التربيعي
- T = انحناء بيزير التربيعي السلس
- أ = القوس البيضاوي
- Z = كلوسيباث
ملاحظة: يمكن أيضًا التعبير عن جميع الأوامر أعلاه بأحرف صغيرة. الأحرف الكبيرة تعني وضعًا مطلقًا ، والحروف الصغيرة تعني موضعًا نسبيًا.
مثال 1
يحدد المثال أدناه مسارًا يبدأ من الموضع 150،0 بخط لوضع 75،200 ثم من هناك ، سطر إلى 225،200 وأخيراً يغلق المسار مرة أخرى إلى 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 لإنشاء رسومات معقدة.