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 (garisan lurus ke)
  • S = smooth curveto (garisan lurus yang halus ke)
  • Q = quadratic Bézier curve (garisan Bézier keduabelas)
  • T = smooth quadratic Bézier curveto (garisan Bézier keduabelas yang halus)
  • A = elliptical Arc (garis lingkaran)
  • Z = closepath (menutup jalur)

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

Contoh 1

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

Ini adalah kod SVG:

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

亲自试一试

Contoh 2

Bézier kurva (Bézier curves) digunakan untuk modelkan garisan lurus yang dapat diukur secara tak terbatas. Biasanya, pengguna memilih dua titik ujung dan satu atau dua titik kontrol. Bézier kurva dengan satu titik kontrol disebut garisan Bézier keduabelas (quadratic Bézier curve), sedangkan Bézier kurva dengan dua titik kontrol disebut garisan Bézier tiga (cubic).

Di bawah ini adalah penggunaan garisan benda sekunder, di mana A dan C adalah titik permulaan dan titik akhir, B adalah titik pengawal:

A B C

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