SVG <path>

SVG Landas - <path>

<path> Elemento ay ginagamit upang talagaan ang landas.

Ang mga sumusunod na komando ay maaaring gamitin sa datos ng landas:

  • M = moveto (ilipat sa)
  • L = lineto (pinta ng linya)
  • H = horizontal lineto (patungo sa patag na linya)
  • V = vertical lineto (patungo sa patag na linya)
  • C = curveto (kurva sa)
  • S = smooth curveto (maluwag na kurva sa)
  • Q = quadratic Bézier curve (quadratic Bézier kurva)
  • T = smooth quadratic Bézier curveto (maluwag na quadratic Bézier kurva)
  • A = elliptical Arc (arko ng elipso)
  • Z = closepath (bukas ang landas)

Babala: Ang lahat ng mga komando sa ito ay maaari ring magamit sa maliliit na pagkakabadyet. Ang malaki na pagkakabadyet ay nangangahulugan ng abosoluto na lokasyon, habang ang maliliit na pagkakabadyet ay nangangahulugan ng relatibong lokasyon.

Halimbawa 1

Ang halimbawa na ito ay nagtatalaga ng isang landas, na nag-uumpisa sa posisyon 150,0, pagkatapos ay nagpipinta ng isang linya papunta sa posisyon 75,200, pagkatapos ay mula doon ay nagpipinta ng isa pang linya papunta sa posisyon 225,200, at sa wakas ay nagbubukas ng landas pabalik sa 150,0.

这是 SVG 代码：

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

Try it yourself

Halimbawa 2

Bézier curves ay gamit sa modeling ng maluwag na kurva na maaaring palakihin o mapababa hanggang sa walang hanggan. Karaniwan, pinili ng mga user ang dalawang pampang at isa o dalawang kontrol na puntos. Ang Bézier curve na may isang kontrol na puntos ay tinatawag na quadratic Bézier curve, habang ang may dalawang kontrol na puntos ay tinatawag na cubic Bézier curve.

下例创建一条二次贝塞尔曲线，其中 A 和 C 是起点和终点，B 是控制点：

A B C

这是 SVG 代码：

<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

Masyadong kumplikado ba? Oo!!! Dahil ang paglililis ng path ay napakakomplikado, malakas na inaasahan na gamitin ang SVG editor upang lumikha ng kumplikadong grapik.