SVG 的
代码结构:
<svg><path d=" Mx轴,y轴 Lx轴,y轴 Lx轴,y轴 Z "
style="stroke:线颜色; stroke-width:线宽; fill:是否填充路径;"
/>
</svg>
::M开始 到 Z关闭路径
定义路径数据命令:
M = moveto (M X,Y) :将画笔移动到指定的坐标位置
L = lineto (L X,Y) :画直线到指定的坐标位置
H = horizontal lineto (H X):画水平线到指定的X坐标位置
V = vertical lineto (V Y):画垂直线到指定的Y坐标位置
C = curveto (C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto (S X2,Y2,ENDX,ENDY) :圆滑曲线
Q = quadratic Belzier curve (Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto (T ENDX,ENDY):映射
A = elliptical Arc (A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath ():关闭路径
说明:
-坐标轴以(0,0)为中心,X轴水平向右,Y轴水平向下。
-允许小写字母;大写绝对定位,参照全局坐标系(50到100);小写相对定位,参照父容器坐标系(50+100=150)。
-同一指令出现多次可以只用一个。
绘制工作
是在
在
第一个命令是
M 移动命令
,目的为确定绘画的起始点。
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M50 50 L40 30 L50 10" "M40,20 A30,30 0 1,1 70,70"
style="stroke:#660000; stroke-width:2; fill:none;" />
</svg>
在path
属性中,添加style
样式来实现线条显示。stroke值为线条颜色,stroke-width值为数值线宽度,fill值为none不填充。
1、弧线A
画半径A指令
有2个参数: *rx
水平方向上的半径, *ry
垂直方向上的半径。
::::当值相同,将得到一个指定为正圆的弧线;当值不同,将得到一个指定为椭圆形的弧线。
例:A30,30 0 0,1 70,70
第一个参数:rx
x轴水平向上半径(起始点 30,30
第二个参数:ry
y轴垂直向上半径(结束点 70,70
第三个参数:x-axis-rotation
设置弧线X轴方向上的旋转,通常不需要改变这个参数,默认值为0。
第四个参数:大小弧形,是否镜像 0,0 1,0 1,1 0,1
large-arc-flag
标志位,决定是否绘制长 / 短的 弧线,值的范围0/1;0以小弧形绘制,1以大弧形绘制。
sweep-flag
标志位,决定是否沿开始点到结束点的直线来镜像弧线。主要是控制弧线的绘制方向,顺时针或逆时针绘制,类似“镜像”效果。值的范围0/1;0不镜像弧线,1镜像弧线。
<svg xmlns="http://www.w3.org/2000/svg">
1 <path d="M40,20 A30,30 0 0,0 70,70" //0,0 小弧形,不镜像 黄色
style="stroke: #cccc00; stroke-width: 2; fill: none;" />
2 <path d="M40,20 A30,30 0 1,0 70,70" //1,0 大弧形,不镜像 放大第一个 红色
style="stroke: #ff0000 stroke-width:2; fill: none;" />
3 <path d="M40,20 A30,30 0 1,1 70,70" /1,1 大弧形,镜像 镜像第一个 绿色
style="stroke: #00ff00; stroke-width: 2; fill: none;" />
4 <path d="M40,20 A30,30 0 0,1 70,70" //0,1 小弧形,镜像 镜像放大的 蓝色
style="stroke: #0000ff; stroke-width: 2; fill: none;" />
</svg>
输出:
2、 二次贝兹曲线Q
Q
命令和直线的原理相同,仅2个参数
第一个参数:控制点(x,y),决定曲线的弧度。控制点能够像磁铁一样拉伸曲线;控制点越接近弧线,弧线越平滑,弧度越大。
第二个参数:结束位置(x,y)
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M50,50 Q50,200 100,100"
style="stroke: #cccc00; stroke-width: 2; fill:none;" />
</svg>
输出:
M50,50 Q50,200 100,100 意思是::
从(50,50)开始到(100,100)位置结束,控制点的位置在(50,100)的位置
3、 闭合路径Z
指将最后的一个绘制点连线到开始点。
大小写没有区别
4、 路径填充 fill
使用CSS语法
<path style=" stroke: #cccc00; stroke-width: 2; fill:none;" />
Path的Data数据生成方式:
- 矢量图形转path数据。
最简单的是用Expression Design
软件工具。将矢量图形 粘贴到软件中,来导出XAML Silverlight 格式的矢量图形 - 文字转path数据。
用Expression Blend 软件工具,文字转成图形,相当于印刷行业里的文字转曲 - 自己手动写 图形/文字 path数据。这也是最难的方式。用Design生成的数据量很大,手写就会变得很简洁。
例图:
<svg xmsnl="www.3c.org">
<path d="M10.68 16.865a.802.802 0 01-.4.093.883.883 0 01-.77-.452l-.053-.133-2.418-5.301a.442.442 0 01.399-.624c.093 0 .186.026.265.092l2.844 2.02a1.348 1.348 0 001.182.133l13.42-5.98c-2.405-2.83-6.365-4.69-10.856-4.69-7.334 0-13.286 4.956-13.286 11.068 0 3.335 1.794 6.338 4.597 8.37.226.16.372.426.372.718 0 .093-.027.186-.053.28-.226.836-.585 2.165-.598 2.231-.027.107-.066.213-.066.32 0 .239.199.438.438.438.093 0 .173-.04.252-.08l2.924-1.647c.212-.133.451-.2.704-.2.133 0 .265.027.385.053 1.355.386 2.817.612 4.331.612 7.335 0 13.287-4.956 13.287-11.068 0-1.847-.545-3.6-1.515-5.129l-15.292 8.822-.093.054z"
fill="#00AC1C"/>
</svg>
输出: