svg 知识点

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--<rect width="300" height="100" stroke="red" stroke-width="5" fill="orange"/>
<!--<circle cx="50" cy="50" r="50" stroke="red" fill="white" stroke-width="5"/>-->
<!--<ellipse cx="100" cy="100" rx="100" ry="50"/>-->
<!--<line x1="0" y1="0" x2="100" y2="200" storke-width="5" stroke="black"/>-->
<!--<polygon points="50,50 100,100, 50,150 0,100"/>-->
<!--<polyline points="50,50, 50,0, 100,50 100,100" fill="none" stroke="red"/>-->
<path d="M300,70 l 0,-70 70,70 0,0 -70,70z" stroke="red"/>
</svg>

 

SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。