xml矢量图:svg的path元素
2007-09-19 14:18
393 查看
一个典型的path元素:
<path id="xxx" class="yy" d="M 228.231 191.802 c -1.5351,-0.2647 -1.9586,-0.4764 -2.5409,-1.0587 -0.3706,-1.1117 -0.7411 z" />
在path元素中id、class与普通html意义一样。最重要的是描述路径的d属性,主要命令如下:
M 路径的起点 如
M x坐标,y坐标
L,V,H 直线
L x坐标,y坐标 (和M配合,组成一条完整直线;同类命令有 V 垂直线,和 H 水平线)
A 弧线
A 半径x,半径y 弧度 [large arc flag],[sweep flag] 终点x,终点y
[large arc flag],[sweep flag]:
0,0 Y轴逆时针旋转
0,1 Y轴顺时针旋转
1,0 X轴逆时针旋转
1,1 X轴顺时针旋转
C,S,Q,T 贝塞曲线
三次贝塞曲线
C 关键点1x,关键点1y 关键点2x,关键点2y 终点x,终点y
二次贝塞曲线
S 关键点2x,关键点2y 终点x,终点y
Q 关键点1x,关键点1y 终点x,终点y
映射
T 终点x,终点y
Z 闭合点
将线连到原点闭合路径
注
1.指令大写是绝对坐标,使用相应小写就指相对坐标。
2.如果转换到IE VML的path属性,c必须替换为v,z替换为x,坐标值全为整数。
<path id="xxx" class="yy" d="M 228.231 191.802 c -1.5351,-0.2647 -1.9586,-0.4764 -2.5409,-1.0587 -0.3706,-1.1117 -0.7411 z" />
在path元素中id、class与普通html意义一样。最重要的是描述路径的d属性,主要命令如下:
M 路径的起点 如
M x坐标,y坐标
L,V,H 直线
L x坐标,y坐标 (和M配合,组成一条完整直线;同类命令有 V 垂直线,和 H 水平线)
A 弧线
A 半径x,半径y 弧度 [large arc flag],[sweep flag] 终点x,终点y
[large arc flag],[sweep flag]:
0,0 Y轴逆时针旋转
0,1 Y轴顺时针旋转
1,0 X轴逆时针旋转
1,1 X轴顺时针旋转
C,S,Q,T 贝塞曲线
三次贝塞曲线
C 关键点1x,关键点1y 关键点2x,关键点2y 终点x,终点y
二次贝塞曲线
S 关键点2x,关键点2y 终点x,终点y
Q 关键点1x,关键点1y 终点x,终点y
映射
T 终点x,终点y
Z 闭合点
将线连到原点闭合路径
注
1.指令大写是绝对坐标,使用相应小写就指相对坐标。
2.如果转换到IE VML的path属性,c必须替换为v,z替换为x,坐标值全为整数。
相关文章推荐
- SVG path 元素详解
- SVG 形状元素(rect、circle、ellipse、line、polyline、polygon、path)
- ClassPathXmlApplicationContext源码解析二:默认空间元素解析
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- xml矢量图 svg的viewBox和vml的coordsize,虚坐标系
- SVG基础 | SVG PATH 元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- xml矢量图:svg的viewBox和vml的coordsize决定的虚坐标系简说
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- 如何动态向HTML中插入SVG元素(包括Line,path,marker..等)
- [翻译svg教程]Path元素 svg中最神奇的元素!
- 30天C#基础巩固----查找XML文件元素
- 最全web.xml配置文件元素详解
- ClassPathXmlApplicationContext , FileSystemXmlApplicationContext
- TiXmlDocument 解析 C++ vc xml元素文本修改
- XML元素的基本规则---2.4.1: 合法的标签名