SVG <path>

SVG Jalur - <path>

<path> Elemen digunakan untuk mendefinisikan jalur.

Perintah berikut dapat digunakan untuk data jalur:

• M = moveto (gerakkan ke)
• L = lineto (gambar garis ke)
• H = horizontal lineto (garis lurus horizontal ke)
• V = vertical lineto (garis lurus vertikal ke)
• C = curveto (garis lurus ke)
• S = smooth curveto (garis lurus yang halus ke)
• Q = quadratic Bézier curve (garis Bézier kuartik)
• T = smooth quadratic Bézier curveto (garis lurus Bézier kuartik yang halus)
• A = elliptical Arc (garis lingkaran)
• Z = closepath (menutup jalur)

Perhatian: Semua perintah di atas juga dapat ditulis dengan huruf kecil. Huruf besar menunjukkan lokasi absolut, sedangkan huruf kecil menunjukkan lokasi relatif.

Contoh 1

Contoh di bawah ini mendefinisikan jalur yang dimulai di titik 150,0, kemudian menggambar garis ke titik 75,200, lalu dari sana menggambar garis ke titik 225,200, akhirnya menutup jalur kembali ke titik 150,0.

Ini adalah kode SVG:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Coba Sendiri

Contoh 2

Garis lingkaran Bézier (Bézier curves) digunakan untuk memodelkan garis lurus yang dapat diukur tanpa batas. Biasanya, pengguna memilih dua titik ujung dan satu atau dua titik kontrol. Garis Bézier dengan satu titik kontrol disebut garis Bézier kuartik (quadratic Bézier curve), sedangkan garis Bézier dengan dua titik kontrol disebut garis Bézier kubik (cubic).

Contoh ini menciptakan kurva quadratic, di mana A dan C adalah titik awal dan titik akhir, B adalah titik kontrol:

Ini adalah kode 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>

Coba Sendiri

Sangat kompleks? Ya!!! Karena jalur perekaannya sangat kompleks, disarankan dengan kuat untuk menggunakan editor SVG untuk membuat grafik kompleks.