SVG <path>

SVG bana - <path>

<path> Element används för att definiera banor.

Följande kommandon kan användas för bane data:

  • M = moveto (flytta till)
  • L = lineto (teckna linje till)
  • H = horizontal lineto (horisontell linje till)
  • V = vertical lineto (vertikal linje till)
  • C = curveto (kurva till)
  • S = smooth curveto (smidig kurva till)
  • Q = quadratic Bézier curve (kvadratisk Bézier kurva)
  • T = smooth quadratic Bézier curveto (smidig kvadratisk Bézier kurva)
  • A = elliptisk Arc (elliptisk båge)
  • Z = closepath (stäng bana)

Observera: Alla ovanstående kommandon kan också skrivas med små bokstäver. Stora bokstäver representerar absolut positionering, medan små bokstäver representerar relativ positionering.

Exempel 1

Följande exempel definierar en bana, med startpositionen 150,0, sedan tecknar en linje till positionen 75,200, därefter tecknar en linje från där till positionen 225,200, och slutligen stänger banan och återvänder till 150,0.

Detta är SVG-koden:

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

Prova själv

Exempel 2

Bézier kurvor används för att modellera smidiga kurvor som kan skalas obegränsat. Vanligtvis väljer användaren två ändpunkter och ett eller två kontrollpunkter. En Bézier kurva med en kontrollpunkt kallas kvadratisk Bézier kurva, medan en kurva med två kontrollpunkter kallas kubisk.

Nedan skapas en kvadratisk Bezier-båge, där A och C är start- och slutpunkterna, och B är kontrollpunkten:

A B C

Detta är 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>

Prova själv

Mycket komplicerat? Ja!!! Eftersom att rita vägar är mycket komplext, rekommenderas starkt att använda en SVG-redigerare för att skapa komplexa grafik.