SVG <path>

<path> 标签用来定义路径。

<path> 标签

<path> 标签用来定义路径。

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

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

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

请把下面的代码拷贝到记事本，然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录：

  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4.  
  5. <svg width="100%" height="100%" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg">
  7.  
  8. <path d="M250 150 L150 350 L350 350 Z" />
  9.  
  10. </svg>

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

下面的例子创建了一个螺旋：

  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4.  
  5. <svg width="100%" height="100%" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg">
  7.  
  8. <path d="M153 334
  9. C153 334 151 334 151 334
  10. C151 339 153 344 156 344
  11. C164 344 171 339 171 334
  12. C171 322 164 314 156 314
  13. C142 314 131 322 131 334
  14. C131 350 142 364 156 364
  15. C175 364 191 350 191 334
  16. C191 311 175 294 156 294
  17. C131 294 111 311 111 334
  18. C111 361 131 384 156 384
  19. C186 384 211 361 211 334
  20. C211 300 186 274 156 274"
  21. style="fill:white;stroke:red;stroke-width:2"/>
  22.  
  23. </svg>

很复杂吧？是的！！！由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。