SVG 路径 <path>
SVG 中的 <path>
元素用于创建路径,它是 SVG 中最强大和最灵活的基本形状之一。
使用 <path>
元素可以绘制直线、曲线、弧线等各种复杂的图形,并且可以通过设置路径命令来控制路径的形状和样式。
基本语法
<path d="path-data" <!-- 定义路径的路径数据 --> fill="fill-color" <!-- 路径的填充颜色 --> stroke="stroke-color" <!-- 路径的描边颜色 --> stroke-width="width" <!-- 路径的描边宽度 --> />
属性解析:
d
属性定义了路径的路径数据,即路径命令序列。路径数据由一系列的路径命令组成,每个路径命令以字母开头,后面跟随一组数字参数。常用的路径命令包括:M(移动到)、L(直线到)、H(水平线到)、V(垂直线到)、C(三次贝塞尔曲线)、S(光滑曲线)、Q(二次贝塞尔曲线)、T(光滑二次贝塞尔曲线)、A(圆弧)、Z(闭合路径)等。fill
属性定义了路径的填充颜色。stroke
属性定义了路径的描边颜色。stroke-width
属性定义了路径的描边宽度。
以下代码绘制了一个橙色填充、黑色描边、宽度为 2 像素的路径,其路径数据为移动到 (50, 50),然后依次连接到 (150, 50) 和 (100, 150),最后闭合路径。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" /> </svg>
实例 1
上面的例子定义了一条路径,它开始于位置 150 0,到达位置 75 200,然后从那里开始到 225 200,最后在 150 0 关闭路径。
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
尝试一下 »
点击查看:查看 SVG 文件。
实例 2
下面的例子创建了一个二次方贝塞尔曲线,A 和 C 分别是起点和终点,B 是控制点:
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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" />
<!-- Mark relevant points -->
<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>
<!-- Label the points -->
<g font-size="30" font="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>
尝试一下 »
点击查看:查看 SVG 文件。
注意事项
<path>
元素的路径数据是 SVG 中最复杂的部分,需要一定的学习和实践才能熟练掌握各种路径命令的使用方式。路径数据可以包含多个路径命令,每个路径命令都可以有不同的参数来控制路径的形状和方向。
通过使用 <path>
元素,你可以在 SVG 中绘制各种复杂的图形和路径,并通过设置属性来控制路径的外观和样式。
点我分享笔记