SVG <path>

SVG pad - <path>

<path> Elementen worden gebruikt om paden te definiëren.

Deze commando's kunnen worden gebruikt voor padgegevens:

  • M = moveto (bewegen naar)
  • L = lineto (lijn tekenen naar)
  • H = horizontal lineto (horizontale lijn naar)
  • V = vertical lineto (verticale lijn naar)
  • C = curveto (kromme naar)
  • S = smooth curveto (smoole kromme naar)
  • Q = quadratic Bézier curve (kwadratische Bézier-kromme)
  • T = smooth quadratic Bézier curveto (smoole quadratic Bézier-kromme)
  • A = elliptische Arc (elliptische boog)
  • Z = closepath (sluit pad)

Opmerking: Alle bovenstaande commando's kunnen ook in kleine letters worden weergegeven. Hoofdletters betekenen absolute定位, kleine letters betekenen relative定位.

Voorbeeld 1

Het volgende voorbeeld definieert een pad dat begint bij 150,0, vervolgens een lijn tekent naar de positie 75,200, daarna een lijn tekent naar de positie 225,200, en tenslotte sluit het pad weer terug naar 150,0.

Dit is SVG-code:

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

Try It Yourself

Voorbeeld 2

Bézier curves worden gebruikt voor het modelleren van gladde krommen die oneindig in te schalen zijn. Meestal kiezen gebruikers twee eindpunten en één of twee controlepunten. Een Bézier-kromme met één controlepunt wordt een kwadratische Bézier-kromme genoemd, en een Bézier-kromme met twee controlepunten wordt een cubische Bézier-kromme genoemd.

Hier wordt een kubische Bezier-kromming gecreëerd, waarbij A en C de start- en eindpunten zijn en B de controlepunt is:

A B C

Dit is SVG-code:

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

Try It Yourself

Very complex? Yes!!! Due to the complexity of drawing paths, it is strongly recommended to use an SVG editor to create complex graphics.