本文转自 http://blog.csdn.net/dai_qingyun/article/details/52856919#t0
SVG(Scalable Vector Graphics)is an XML-based Language for creating graphics.
SVG支持css,这一点有效的将图形和样式区分开。
SVG的应用:
1、绘图
2、动画
下面介绍一些基本的语法:
----------------
公共属性
----------------
fill: 填充色 | url(id)这里主要是引用渐变色作为背景
stroke: 线条的颜色
stroke-width: 线条的宽度
stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ----- round和square会影响线条的长度
opacity: 不透明度 0~1
fill-rule: nonzero (非零环绕原则)evenodd
stroke-dasharray: 创建虚线数组 x,y,z,..... (长度,间隔,长度,间隔,。。。。)
stroke-dashoffset: 偏移
filter: url(id) 添加滤镜
---------
矩形
---------
<rect x="" y="" rx="" ry="" width="" height=""></rect>
(x, y): 左上角坐标
rx: x轴圆角半径
ry: y轴圆角半径
width: 长度
height: 高度
---------
圆
---------
<circle cx="" cy="" r=""></circle>
(cx, cy): 圆心
r: 半径
--------------
椭圆
--------------
<ellipse cx="" cy="" rx="" ry=""></ellipse>
(cx, cy): 中心点
rx: x轴半径
ry: y轴半径
--------
线条
--------
<line x1="" y1="" x2="" y2=""></line>
(x1, y1): 线条的起始点
(x2, y2): 线条的结束点
---------------
多边形polygon
---------------
<polygon points=""></polygon>
points: x,y x1,y1 ........
----------------
曲线polyline
----------------
<polyline points=""></polyline>
points: x,y x1,y1 .........
---------------
路径
---------------
<path d=""></path>
d: 路径的描述
主要的语法:
M: moveTo
L: lineTo
H: horizontal lineTo
V: vertical lineTo
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath
命令区分大小写,除了Z。大写表示绝对位置,小写表示相对位置。
---------------
绘制文本
---------------
<text x="" y="" text-anchor="" dx="" dy="">text</text>
(x, y): 文字左下角的起始坐标
text-anchor: start middle end 文本锚点(可能会和我们预期的坐标有出入)
dx: 横轴的偏移
dy: 纵轴的偏移
路径文本的绘制
<textPath xlink:href="#path">text</textPath>
<text>中还可以嵌套<tspan x="" y="">text</tspan>
同时文本也可以作为超链接
<a xlink:href="" target="">
<text></text>
</a>
-----------------
滤镜
-----------------
<filter id=""></filter>
--------------
渐变
--------------
线性渐变
<linearGradient x1="" y1="" x2="" y2="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</linearGradient>
gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
x1: 渐变开始横坐标
y1: 渐变开始纵坐标
x2: 渐变结束横坐标
y2: 渐变结束纵坐标
offset: 渐变开始的位置 0% - 100%
放射性渐变
<radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</radialGradient>
gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
cx: 外层圆心横坐标
cy: 外层圆心纵坐标
fx: 内层圆心横坐标
fy: 内层圆心纵坐标
r: 发散的半径
offset: 渐变开始的位置 0% - 100%
----------
裁剪
----------
<clipPath id="">裁剪路径</clipPath>
----------
引用元素
----------
<defs>声明引用元素</defs>
----------
拷贝
----------
<use x="" y="" width="" height="" xlink:href="id"></use>
(x, y): 克隆对象的左上角坐标
width: 克隆对象的宽度
height: 克隆对象的高度
xlink:href 引用克隆对象
----------
模式
----------
<pattern id="" width="" height="" patternUnits="" patternTransform="">模式内的形状</pattern>
width: 模式的宽度
height: 模式的高度
patternUnits: 定义pattern的坐标系统 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
patternTransform: 变换
----------
遮罩
----------
<mask maskUnits="" x='' y="" width="" height="">内容</mask>
(x, y): 裁剪的左上角坐标。
width: 裁剪的宽度
height: 裁剪的高度
了解了语法后,再看上一篇《
写一个SVG图形》中的示列代码就能读懂了。