SVG <path>

SVG Yolu - <path>

<path> Element, yolu tanımlamak için kullanılır.

Aşağıdaki komutlar, yol verilerinde kullanılabilir:

  • M = moveto（konuma taşıma）
  • L = lineto（çizgi çizme）
  • H = horizontal lineto（yatay çizgiye）
  • V = vertical lineto（dikey çizgiye）
  • C = curveto（eğriye）
  • S = smooth curveto（pürüzsüz eğriye）
  • Q = quadratic Bézier curve（ikili Bézier eğrisi）
  • T = smooth quadratic Bézier curveto（pürüzsüz ikili Bézier eğrisi）
  • A = elliptical Arc（eliptik yay）
  • Z = closepath（yolu kapatma）

Dikkat: Yukarıdaki tüm komutlar küçük harflerle de kullanılabilir. Büyük harfler绝对定位, küçük harfler ise relatife定位.

Örnek 1

Aşağıdaki örnek, 150,0 konumundan başlayarak 75,200 konumuna doğru bir çizgi çizer, ardından buradan 225,200 konumuna doğru bir çizgi çizer ve son olarak yolu 150,0 konumuna döndürerek kapatan bir yolu tanımlar.

Bu SVG kodu:

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

Kişisel olarak deneyin

Örnek 2

Bézier çizgileri, sınırsız ölçeklenebilir pürüzsüz çizgiler modellemek için kullanılır. Genellikle, kullanıcı iki uç nokta ve bir veya iki kontrol noktası seçer. Bir kontrol noktasına sahip Bézier çizgisi ikili Bézier çizgisi olarak adlandırılır, iki kontrol noktasına sahip Bézier çizgisi ise üçlü Bézier çizgisi olarak adlandırılır.

A ve C başlangıç ve bitiş noktaları olan, B kontrol noktası içeren bir ikinci dereceden parabolik çizgi oluşturma:

A B C

Bu SVG kodu:

<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>

Kişisel olarak deneyin

Çok karmaşık mı? Evet！！！Yolların çizilmesi çok karmaşık olduğu için, karmaşık grafiklerin oluşturulması için SVG düzenleyicinin kullanılmasını şiddetle tavsiye ederim.