(10)SVG中所用到的形状简介------定义路径

来源:互联网 发布:买一个淘宝店铺 编辑:程序博客网 时间:2024/06/05 04:00
 

<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 目录:

<?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 width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg>

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

效果图:

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

<?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 width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274"style="fill:white;stroke:red;stroke-width:2"/></svg>

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

效果图:



原创粉丝点击