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 برای ایجاد اشکال پیچیده استفاده شود.