SVG <path>

SVG sti - <path>

<path> Element bruges til at definere en sti.

Følgende kommandoer kan bruges til stidata:

  • M = moveto (flytter til)
  • L = lineto (tegner linje til)
  • H = horizontal lineto (vandret linje til)
  • V = vertical lineto (vandret linje til)
  • C = kurveto (kurve til)
  • S = glat kurveto (glat kurve til)
  • Q = kvadratisk Bézier kurve (kvadratisk Bézier kurve)
  • T = glat kvadratisk Bézier kurveto (glat kvadratisk Bézier kurve)
  • A = elliptisk Arc (elliptisk bue)
  • Z = closepath (luk stien)

Bemærk: Alle ovennævnte kommandoer kan også skrives med små bogstaver. Store bogstaver repræsenterer absolut positionering, mens små bogstaver repræsenterer relativ positionering.

Eksempel 1

I dette eksempel defineres en sti, der starter ved 150,0, derefter tegner en linje til 75,200, derefter tegner en linje fra der til 225,200, og sidst lukker stien ved at returnere til 150,0.

Dette er SVG-koden:

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

Prøv det selv

Eksempel 2

Bézier kurver bruges til at modellere glatte kurver, der kan skaleres ubegrænset. Som regel vælger brugeren to端点 og ét eller to kontrolpunkter. En Bézier kurve med ét kontrolpunkt kaldes en kvadratisk Bézier kurve, mens en kurve med to kontrolpunkter kaldes en kubisk Bézier kurve.

Følgende opretter en cirkulær bæsjerkurve, hvor A og C er start- og slutpunkter, og B er kontrolpunktet:

A B C

Dette er SVG-koden:

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

Prøv det selv

Meget komplekst? Ja！！！På grund af den komplekse tegning af stien anbefales det kraftigt at bruge en SVG redigerer til at skabe komplekse grafikker.