SVG学习小结

学习W3school上的SVG教程。

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：
<?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>

第一行是xml标准头，其中的standalone="no"表明本文件会引用其他外部文件，也就是下一行的DTD文件；

第二三行引用的DTD相当于SVG的库，包含SVG所有的元素；

后面是内容，必须包含在<svg></svg>标签之间。

<circle />标签引用svg的circle对象，cx是圆点的横坐标，cy是圆点的纵坐标，r是圆半径
stroke是轮廓线，fill是元素内部填充的颜色。

二.除了circle，还有其他元素：
1.矩形：
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
其中，x是左上角的横坐标，y是左上角的纵坐标（距离浏览器窗口左上角），style定义属性，也可以像上面那样分开一项一项的设置，
opacity是颜色的透明度（0-1之间取值），0最模糊（透明度最高）。

2.椭圆
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
其中，cx是圆点的x坐标，cy是圆点的y坐标，rx是水平半径，ry是垂直半径；

3.线条
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
其中，x1/y1、x2/y2分别是起止点的坐标；

4.多边形
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
其中，四个顶点坐标；

5.折线
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
其中，fill的是起止点之间的直连线与折线之间包含的区域；

6.路径
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
<path d="M250 150 L150 350 L350 350 Z" />
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
两条不同的路径；

三、其他效果
1.滤镜
可用的滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
可以在每个svg元素上使用多个滤镜！

一个例子：
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
其中，<filter>定义滤镜，必须在<defs>之间，
stdDeviation定义模糊的程度，值越大越模糊，
in="SourceGraphic"表明由整个图像创建效果；

2.渐变：
a.线性渐变：
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
其中，<linearGradient>是线性渐变标签，id定义唯一名称，
x1/y1、x2/y2定义渐变开始和结束的位置，决定是水平、垂直或者斜角的，
渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个 <stop> 标签来规定，
offset 属性用来定义渐变的开始和结束位置；

b.放射渐变：
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
其中，<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，
cx、cy 和 r 属性定义外圈，
而 fx 和 fy 定义内圈，
渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个 <stop> 标签来规定，
offset 属性用来定义渐变的开始和结束位置。

补充：

1.使用text来绘制文字。
2.SVG图形属性可以直接设置，也可以用CSS+class的方式来设置，但是不支持CSS中的Z-index属性，
因为SVG中的图形没有深度和层次感，它们会相互覆盖，后绘制的图形会覆盖先绘制的图形，
因此SVG中图形的绘制顺序十分重要。
3.SVG中实现透明的方法有两种，一是使用RGB的颜色通道，二是设置opacity的值。
<circle cx="325" cy="325" r="20" fill="rgba(255, 0, 0, 0.1)"/>
rgba中透明通道的取值在0~1之间。1是不透明，0是全透明。

<circle cx="325" cy="325" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.3"/>
opacity的取值同上。
如果既有rgba透明通道，又设置了opacity，则透明度为两数值相乘后的结果。

posted @ 2013-08-27 13:39 头头胖胖阅读(351) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

SVG学习小结

公告