阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 路径 - <path>

      SVG 路径 - <path>

      path可能是SVG中最常见的形状。你可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂,所以会在下一章进行详细介绍。这里只介绍一个定义路径形状的属性。

      <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
      
      • d
        • 一个点集数列以及其它关于如何绘制路径的信息。请阅读Paths 章节以了解更多信息。

      <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

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


      实例

      上面的例子定义了一条路径,它开始于位置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>
      

      实例 2

      下面的例子创建了一个二次方贝塞尔曲线,A 和 C 分别是起点和终点,B 是控制点:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 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" />
        <!-- 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>
      
      ABC

      复杂吗?是的!!由于在绘制路径时的复杂性,强烈建议使用SVG编辑器来创建复杂的图形。

      如上面所说,<path>元素是SVG基本形状中最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。

      另外,path只需要设定很少的点,就可以创建平滑流畅的线条(比如曲线)。

      虽然polyline元素也能实现类似的效果,但是必须设置大量的点(点越密集,越接近连续,看起来越平滑流畅),并且这种做法不能够放大(放大后,点的离散更明显)。

      所以在绘制SVG时,对路径的良好理解很重要。虽然用XML或文本编辑器来编辑path元素不是很容易,但可以帮助我们理解path是如何工作的,所以,你就忍了吧。

      上面提到过,path元素的形状是通过属性d定义的,属性d的值是一个“命令+参数”的序列,我们将讲解这些可用的命令,并且展示一些示例。

      每一个命令都用一个关键字母来表示,

      比如,字母“M”表示的是“Move to”命令,当解析器读到这个命令时,它就知道你是打算移动到某个点。跟在命令字母后面的,是你需要移动到的那个点的x和y轴坐标。

      比如移动到(10,10)这个点的命令,应该写成“M 10 10”。这一段字符结束后,解析器就会去读下一段命令。

      每一个命令都有两种表示方式,一种是用大写字母,表示采用绝对定位。另一种是用小写字母,表示采用相对定位(例如:从上一个点开始,向上移动10px,向左移动7px)。

      因为属性d采用的是用户坐标系统,所以不需标明单位。在后面的教程中,我们会学到如何让变换路径,以满足更多需求。

      目录
      目录