SVG <path>

SVG مسار - <path>

<path> العنصر يُستخدم لتحديد المسار.

يمكن استخدام الأوامر التالية لبيانات المسار:

  • M = تحريك إلى (moveto)
  • L = رسم خط (lineto)
  • H = خط أفقية (horizontal lineto)
  • V = خط عمودي (vertical lineto)
  • C = منحنى (curveto)
  • S = منحنى سلس (smooth curveto)
  • Q = منحنى بيزاري ثنائي (quadratic Bézier curve)
  • T = منحنى بيزاري ثنائي سلس (smooth quadratic Bézier curveto)
  • A = دائرة إهليلجية (elliptical Arc)
  • Z = إغلاق المسار (closepath)

ملاحظة: يمكن أيضًا استخدام الحروف الصغيرة لتلك الأوامر. تُعتبر الحروف الكبيرة تمثيلًا للتعيين الدقيق، بينما تُعتبر الحروف الصغيرة تمثيلًا للتعيين التراكمي.

مثال 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

الخطوط البيزير (Bézier curves) تستخدم لإنشاء منحنيات سلسة يمكن تقليلها إلى أي حجم. عادةً، يختار المستخدم نقطتين نهايتين وإحدى أو نقطتين تحكمية. الخط البيزير الذي يحتوي على نقطة تحكم واحدة يُدعى خط بيزاري ثنائي (quadratic Bézier curve)، والخط البيزري الذي يحتوي على نقطتين تحكمية يُدعى خط بيزاري ثلاثي (cubic).

في المثال التالي، يتم إنشاء منحنى بيزيير ثنائي، حيث تشكل A و C البداية والنهاية، و B هي نقطة التحكم:

A B C

هذا هو شفرة 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" />
  <!-- 标记相关的点 -->
  <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>
  <!-- 给点添加标签 -->
  <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 لإنشاء رسوم معقدة.