SVG <path>

SVG 路径是用于描述图形的最强大和灵活的方法之一。路径由一系列的命令组成,这些命令告诉浏览器如何绘制图形。每个命令包含一个字母和一组参数,用来指定操作类型和操作所需的数据。

基本路径命令

SVG 路径命令包括以下基本命令:

  • M:移动到指定的坐标
  • L:从当前点绘制一条直线到指定的坐标
  • H:从当前点绘制一条水平线到指定的 x 坐标
  • V:从当前点绘制一条垂直线到指定的 y 坐标
  • C:绘制一个三次贝塞尔曲线
  • S:绘制一个光滑的三次贝塞尔曲线
  • Q:绘制一个二次贝塞尔曲线
  • T:绘制一个光滑的二次贝塞尔曲线
  • A:绘制一个椭圆弧

示例代码

下面是一个简单的 SVG 路径示例,绘制一个带有圆角的矩形:

---- ----------- ------------ -----------------------------------
  ----- ---- -- --
           - -- --
           - -- -- - - - --- --
           - --- --
           - -- -- - - - -- --
           - -- --
           - -- -- - - - - --
           - - --
           - -- -- - - - -- --
           -- ----------- ----------------
------

在上面的示例中,我们使用了 M、L 和 A 命令来绘制一个带有圆角的矩形。首先我们移动到 (10, 10) 点,然后绘制一条水平线到 (90, 10) 点,接着绘制一个椭圆弧,最后闭合路径。

总结

SVG 路径是一种强大的工具,可以用来创建各种复杂的图形。熟练掌握路径命令是成为优秀的 SVG 开发者的关键。希望通过本章节的介绍,你对 SVG 路径有了更深入的理解。


上一篇:SVG 曲线
下一篇:SVG 文本