SVG <path>

SVG polku - <path>

<path> Elementti määrittelee polun.

Seuraavat komennot voidaan käyttää polkuaineistossa:

  • M = moveto (siirrä)
  • L = lineto (piirrä viiva)
  • H = horizontal lineto (horisontaalinen viiva)
  • V = vertical lineto (pystysuuntainen viiva)
  • C = curveto (kaari)
  • S = smooth curveto (pehmeä kaari)
  • Q = quadratic Bézier curve (toisen asteen Bézier-kaari)
  • T = smooth quadratic Bézier curveto (pehmeä toisen asteen Bézier-kaari)
  • A = elliptical Arc (ellipse Arc)
  • Z = closepath (sulje polku)

Huomio: Kaikki yllä olevat komennot voidaan myös kirjoittaa pienillä kirjaimilla. Isolla kirjaimella ilmaistaan absoluuttinen sijainti, pienellä kirjaimella suhteellinen sijainti.

Esimerkki 1

Alla oleva esimerkki määrittelee polun, joka alkaa sijainnista 150,0, sitten piirtää viivan sijaintiin 75,200, siirrytään sieltä viivan sijaintiin 225,200, ja lopuksi sulkee polun palaten sijaintiin 150,0.

Tämä on SVG-koodi:

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

Kokeile itse

Esimerkki 2

Bézier-kaaret (Bézier curves) käytetään mallintamaan äärettömästi skaalautuvia pehmeitä kaaria. Yleensä käyttäjä valitsee kaksi päätä ja yhden tai kaksi kontrollipistettä. Yhdellä kontrollipisteellä oleva Bézier-kaari kutsutaan toisen asteen Bézier-kaareksi (quadratic Bézier curve), kahdella kontrollipisteellä oleva kolmannen asteen Bézier-kaareksi (cubic).

Esimerkiksi luodaan kaksinkertainen Bézier-kaari, jossa A ja C ovat alkupisteitä ja loppupisteitä, ja B on kontrollipiste:

A B C

Tämä on SVG-koodi:

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

Kokeile itse

Vaikeaa? Kyllä!!! Järjestelmän piirtäminen on erittäin monimutkaista, joten suositellaan vahvasti SVG-editorin käyttöä monimutkaisten kuvien luomiseen.