helius1214
- 浏览: 77684 次
- 性别:
- 来自: 北京
-
文章分类
SVG语法教程指南中文版
2008.03.16 Vicos
来源：SVG中国(ChinaSVG.COM)
翻译：蔡发明
英文版：http://w3schools.com/svg/default.asp
(对照W3C官方英文版格式,再做一次翻译修正，最末部分还待翻译完成)
1 SVG简介
SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。
1.1 学习之前应具备的知识基础
你应该确保你有以下知识基础以便在后面更好的学习和理解SVG，并达到事半功倍的效果：
* HTML
* Basic XML
如果你想先学习一下这些知识。请访问W3Schools Online Web Tutorials(英文站点)，中文内容可以访问SVG中国的基础内容栏目。
1.2 什么是svg?
* SVG指的是Scalable Vector Graphics，“可升级矢量图形”的意思；
* SVG是用来定义面向web的矢量图形；
* SVG基于XML语言定义图形；
* 当你放大或重新设置图形大小时，SVG图形质量不会有所损失；
* SVG里的每一个元素和属性都可以自定义；
* SVG是一个W3C推荐标准；
* SVG可以和W3C的其他推荐标准结合使用。
1.3 SVG的历史和优点
Web浏览器在表现矢量图形方面的薄弱，引起各大软件厂商和组织纷纷推出自己的矢量图形规范，为统一标准结束这种混乱局势，W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作，同时Microsoft、Sun、HP、IBM、Apple、Adobe、Corel及Kodak等一些著名公司也参与到SVG标准的制定。
W3C于1999年2月11日发布了SVG第一个讨论草案；
W3C于2001年9月4日发布SVG 1.0;
W3C于2003年1月4日发布SVG 1.1;
W3C于2003年1月14日推出SVG移动子版本：SVG Tiny和SVG Basic;
W3C于2005年4月日发布的SVG 1.2草案;
W3C于2006年8月10日SVG Tiny 1.2 为 W3C 候选推荐标准。
与其他图形格式（JPEG、GIF）相比使用SVG的优点如下：
* SVG文件可以被很多的工具（比如记事本）阅读和编辑；
* SVG文件比JPEG和GIF更小压缩比更大；
* SVG图像是可压缩的；
* SVG图像可以以任何分辨率高清晰打印；
* SVG图像是可缩放的，图像的任何部分都可以无损失缩放；
* SVG里的文字是可供选择和搜索（制作地图的良好功能）；
* SVG可以和诸如java等技术共同工作；
* SVG是一个开放标准；
* SVG文件是纯xml的。
SVG的主要竞争对手是Flash。
SVG与Flash两者有很多的相似特征，但和Flash相比SVG最大优点是他与其他标准（比如XSL和DOM）相兼容。而Flash则是未开源的私有专利技术，只属Adobe公司所有，不具有开放性。
1.4 查看SVG文件
SVG的最大缺点是没有完全支持SVG的浏览器，准确的说是主流浏览器不支持SVG文件的显示。不过当前越来越多的厂商已经投入到开发SVG项目中，并且很多著名企业已经发布支持SVG的程序软件，SVG阵营正在迅猛扩大。
Opera浏览器支持SVG显示。
Mozilla Firefox浏览器自版本1.5发行后，开始支持SVG显示。
加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。不过Microsoft正计划Internet Explorer 8.0内置支持SVG显示。
我们等待SVG在更多流行的浏览器软件上支持，到那时SVG的时代就将带来。
二、SVG实例
SVG是用XML来编写的。
2.1 SVG的一个实子
下面的例子是一个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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
查看例子（仅用于支持SVG的浏览器）
（如需查看SVG源代码，请打开此例，然后在窗口中右击。选择“查看源代码”。）
2.2 代码解释
第一行包含了XML声明。请注意standalone属性，这个属性规定本SVG文件是独立的还是包含一个对外部文件的引用。
standalone="no"意味着本SVG文档包含一个对外部文件的引用，比如说DTD文件。
第二和第三行引用了这个外部的SVG DTD。该DTD位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该DTD位于W3C，含有所有允许的SVG元素。
SVG文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>。width和height属性用来设置SVG文档的宽和高，Version属性定义了SVG的版本，xmlns属性定义了SVG的名称空间。
<circle>元素用来划一个圆。cx和cy属性定义了圆中心点的x，y坐标。如果cx，cy省略，则圆以（0，0）点为中心。r属性定义了圆的半径。
Stroke和stroke-width属性控制图形的外轮廓。我们给圆设置了一个宽2px的黑色边框。
fill属性指出了图形的颜色。我们给圆设置了红色。
</svg>标签则结束了svg根元素和本文档。
注意：所有开始标签必须有对应的结束标签。
三、在HTML页面中的插入SVG
SVG文件可通过以下标签嵌入HTML文档：<embed>、<object>或者<iframe>。
下面你将看到SVG嵌入到HTML文档的三种方法。
3.1 使用<embed>标签
所有主流浏览器都支持<embed>标签，允许使用脚本。
注释：Adobe SVG Viewer推荐您使用<embed>标签来将SVG包含进HTML文档！但是，当你要创建有效的XHTML文档的时候，你不能使用<embed>。因为任何一个HTML的推荐标准里都不推荐<embed>标签。
语法：
<embed src="/rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释：pluginspage属性指出了插件下载的地址。
提示：IE浏览器支持一个附加的属性，wmode="transparent"，用来使HTML背景透明。
3.2 使用<object>标签
<object>标签是HTML 4的标准标签，被所有新的浏览器支持。缺点是他不支持脚本。
注意：如果你安装的最近版本的Adobe SVG Viewer，运用<object>标签SVG文件将不工作（至少不能在IE中工作）。
语法：
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注释：codebase属性指出插件下载的地址。
3.3 使用<iframe>标签
<iframe>标签可以在大部分的浏览器里工作。
语法：
<iframe src="/rect.svg" width="300" height="100">
</iframe>
3.4 我最期望的方式
如果我们可以运用SVG命名空间，直接将SVG元素添加到HTML里，那真是太棒了！就像下面这个样子：
<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
四、SVG<rect>
Svg有一些预定义的可以直接使用操作的图形元素
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
下面将详细介绍每一个元素，从rect开始。
The <rect> Tag
<rect>用来生成矩形或矩形的变种。
为了理解<rect>怎么工作，复制下面的代码到记事本，然后保存为rect1.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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
代码解释：
Width和height属性指出举行的宽和高。
style属性定义css属性
fill属性定义矩形填充的颜色（rgb值，颜色值，十六进制值）
stroke-width属性指定矩形填充线宽。
stroke属性指定矩形border颜色。
再看一个带有新属性的例子
<?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">
<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"/>
</svg>
代码解释：
x属性定义矩形的左位置（例如x="0"将矩形放在距window窗口左端0px处）
y属性定义矩形距上端的位置（例如y="0"将矩形放在距window窗口上部0px处）
CSS fill-opacity属性定义填充颜色的透明度（从0到1）
CSS stroke-opacity属性定义描边颜色的透明度（从0到1）
为整个元素定义元素例子
<?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">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
代码解释：
CSS opacit属性定义整个元素的透明度（从0到1）
下一个例子，创建一个圆角矩形
<?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">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
代码解释：
rx and ry属性定义举行的圆角
五、SVG <circle>
<circle>属性用来创建一个圆。
将下列代码复制进记事本，并保存成.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">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
View example
代码解释：
cx and cy属性定义圆心的x，y坐标，如果省略，在圆心为（0，0）
r属性定义圆的半径
六、SVG<ellipse>
<elipse>标签用来创建一个椭圆。椭圆类似于圆.不同仅仅在于椭圆有下x，y两个值不同半径，而圆的x，y半径值相同。
复制下面代码到记事本，存为ellipse1.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">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代码解释：
cx指出椭圆的中心点的x坐标
cy指出椭圆的中心点的y坐标
rx指出椭圆的横向半径
ry指出椭圆的纵向半径
下面例子创建三个叠加的椭圆：
<?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">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>
View example
下面例子将两个椭圆组合：
<?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">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>
View example
七、SVG <line>
<line>标签用来创建一条直线。
复制下列代码到记事本，存成line1.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">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代码解释：
x1指定起点的x坐标
y1指定起点的y坐标
x2指定终点的x坐标
y2指定终点的y坐标
八、SVG<polygon>
<polygon>标签用来创建一个多于三个边的图形。
父子下面代码倒记事本，存成polygon1.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">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
代码解释：
Points属性定义多边形每个角的x,y坐标
下面例子创建一个四边形
<?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">
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
九、SVG <polyline>
<polyline>用来创建由任意直线组成的图形
复制下列代码到记事本，存成polyline1.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">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
十、SVG<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 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"/>
</svg>
复杂?是的!由于path的复杂性，强烈建议使用svg编辑器来创建复杂的图形。
十一、SVG滤镜(SVG Filters)
svg滤镜用来给图形和文字添加特殊效果
可用的滤镜有以下这些：
* feBlend
* feColorMatrix
* feComponentTransfer
* feComposite
* feConvolveMatrix
* feDiffuseLighting
* feDisplacementMap
* feFlood
* feGaussianBlur
* feImage
* feMerge
* feMorphology
* feOffset
* feSpecularLighting
* feTile
* feTurbulence
* feDistantLight
* fePointLight
* feSpotLight
提示：你可以在每个元素里多重运用滤镜。
SVG高新模糊(Blur值)
一个svg滤镜必须在<defs>标签里定义。
高斯模糊
<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。
<filter>标签必须嵌套到<defs>标签里，<defs>标签是definitions的简写，允许特殊标签的定义。如filter
复制下面代码到纪事本，存为filter1.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">
<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)"/>
</svg>
代码解释：
<filter>的id属性定义filter的唯一标识名(滤镜可以文档中的多个元素使用)
filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时，#是必须的。
滤镜效果是在<feGaussianBlur>标签里定义的。fe前缀对所有滤镜有用
<feGaussianBlur>stdDeviation属性用来定义blur的值
in="SourceGraphic"定义本效果的输入源是整个图像
不同blur值得另一个例子
<?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">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
十二、SVG渐变(SVG Gradients)
一个svg渐变必须在<defs>标签里定义
svg渐变
渐变是自一种颜色到另一种颜色的逐渐过渡。另外，多个颜色渐变可以应用到相同的元素上。
有两种形式的渐变：
* Linear Gradients
* Radial Gradients
线性渐变(Linear Gradients)
<linearGradient>标签用来定义一个svg线性渐变
<linearGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
线性渐变可以被定义为，水平，垂直，角形渐变。
当y1≠y2，x1=x2时，产生水平渐变
当x1≠x2，y1=y2时，产生垂直渐变
当y1≠y2，x1≠x2时，产生角形渐变
复制下列代码到记事本，保存为linear1.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">
<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>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
代码解释：
<linearGradient>标签的id属性定义渐变的唯一标识名。
fill:url(#orange_red)属性给椭圆链接渐变
<linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
另一个例子
<?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">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
径向渐变(Radial Gradients)
<radialGradient>标签用来定义一个svg径向渐变。
<radialGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
复制下列代码到记事本，保存为linear1.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">
<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>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
代码解释：
<radialGradient>的id属性定义了渐变的唯一标志名
fill:url(#gray_blue)属性给椭圆链接渐变
cx,cy,r属性定义外圆，fx,fy定义内圆
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
另一个例子
<?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">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" 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>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
十三、SVG的元素(SVG Examples）
SVG Shapes
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
A circle
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A polyline
A path
A spiral
SVG Filters
A feGaussianBlur filter
Another feGaussianBlur filter
A feBlend filter
A feColorMatrix filter
A feComponentTransfer filter
A feOffset filter
feOffset, feFlood, feComposite, feMerge, and feMergeNode
A feMorphology filter
* Filter 1
* Filter 2
* Filter 3
* Filter 4
* Filter 5
* Filter 6
SVG Gradients
Grad linear (horizontal gradient)
Grad linear (vertical gradient)
Grad radial
Grad radial 2
SVG Misc
Add an <a> element to a rectangle. The rectangle will act as a hyperlink
Use a JavaScript to create an a element when the user clicks on a circle
Rectangle that repeatedly fade away over 5 seconds
Animate the x, y, width, and height attributes of a rectangle and change the color of the rectangle
Three rectangles that will change color
Text that will move along a motion path
Text that will move, rotate and scale along a motion path
Text that will move, rotate and scale along a motion path + a rectangle that will "grow" and change color
十四、SVG Elements
The links in the "Element" column point to attributes and more useful information about the specific element.
[***表格]
2008.03.16 Vicos
来源：SVG中国(ChinaSVG.COM)
翻译：蔡发明
英文版：http://w3schools.com/svg/default.asp
(对照W3C官方英文版格式,再做一次翻译修正，最末部分还待翻译完成)
1 SVG简介
SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。
1.1 学习之前应具备的知识基础
你应该确保你有以下知识基础以便在后面更好的学习和理解SVG，并达到事半功倍的效果：
* HTML
* Basic XML
如果你想先学习一下这些知识。请访问W3Schools Online Web Tutorials(英文站点)，中文内容可以访问SVG中国的基础内容栏目。
1.2 什么是svg?
* SVG指的是Scalable Vector Graphics，“可升级矢量图形”的意思；
* SVG是用来定义面向web的矢量图形；
* SVG基于XML语言定义图形；
* 当你放大或重新设置图形大小时，SVG图形质量不会有所损失；
* SVG里的每一个元素和属性都可以自定义；
* SVG是一个W3C推荐标准；
* SVG可以和W3C的其他推荐标准结合使用。
1.3 SVG的历史和优点
Web浏览器在表现矢量图形方面的薄弱，引起各大软件厂商和组织纷纷推出自己的矢量图形规范，为统一标准结束这种混乱局势，W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作，同时Microsoft、Sun、HP、IBM、Apple、Adobe、Corel及Kodak等一些著名公司也参与到SVG标准的制定。
W3C于1999年2月11日发布了SVG第一个讨论草案；
W3C于2001年9月4日发布SVG 1.0;
W3C于2003年1月4日发布SVG 1.1;
W3C于2003年1月14日推出SVG移动子版本：SVG Tiny和SVG Basic;
W3C于2005年4月日发布的SVG 1.2草案;
W3C于2006年8月10日SVG Tiny 1.2 为 W3C 候选推荐标准。
与其他图形格式（JPEG、GIF）相比使用SVG的优点如下：
* SVG文件可以被很多的工具（比如记事本）阅读和编辑；
* SVG文件比JPEG和GIF更小压缩比更大；
* SVG图像是可压缩的；
* SVG图像可以以任何分辨率高清晰打印；
* SVG图像是可缩放的，图像的任何部分都可以无损失缩放；
* SVG里的文字是可供选择和搜索（制作地图的良好功能）；
* SVG可以和诸如java等技术共同工作；
* SVG是一个开放标准；
* SVG文件是纯xml的。
SVG的主要竞争对手是Flash。
SVG与Flash两者有很多的相似特征，但和Flash相比SVG最大优点是他与其他标准（比如XSL和DOM）相兼容。而Flash则是未开源的私有专利技术，只属Adobe公司所有，不具有开放性。
1.4 查看SVG文件
SVG的最大缺点是没有完全支持SVG的浏览器，准确的说是主流浏览器不支持SVG文件的显示。不过当前越来越多的厂商已经投入到开发SVG项目中，并且很多著名企业已经发布支持SVG的程序软件，SVG阵营正在迅猛扩大。
Opera浏览器支持SVG显示。
Mozilla Firefox浏览器自版本1.5发行后，开始支持SVG显示。
加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。不过Microsoft正计划Internet Explorer 8.0内置支持SVG显示。
我们等待SVG在更多流行的浏览器软件上支持，到那时SVG的时代就将带来。
二、SVG实例
SVG是用XML来编写的。
2.1 SVG的一个实子
下面的例子是一个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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
查看例子（仅用于支持SVG的浏览器）
（如需查看SVG源代码，请打开此例，然后在窗口中右击。选择“查看源代码”。）
2.2 代码解释
第一行包含了XML声明。请注意standalone属性，这个属性规定本SVG文件是独立的还是包含一个对外部文件的引用。
standalone="no"意味着本SVG文档包含一个对外部文件的引用，比如说DTD文件。
第二和第三行引用了这个外部的SVG DTD。该DTD位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该DTD位于W3C，含有所有允许的SVG元素。
SVG文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>。width和height属性用来设置SVG文档的宽和高，Version属性定义了SVG的版本，xmlns属性定义了SVG的名称空间。
<circle>元素用来划一个圆。cx和cy属性定义了圆中心点的x，y坐标。如果cx，cy省略，则圆以（0，0）点为中心。r属性定义了圆的半径。
Stroke和stroke-width属性控制图形的外轮廓。我们给圆设置了一个宽2px的黑色边框。
fill属性指出了图形的颜色。我们给圆设置了红色。
</svg>标签则结束了svg根元素和本文档。
注意：所有开始标签必须有对应的结束标签。
三、在HTML页面中的插入SVG
SVG文件可通过以下标签嵌入HTML文档：<embed>、<object>或者<iframe>。
下面你将看到SVG嵌入到HTML文档的三种方法。
3.1 使用<embed>标签
所有主流浏览器都支持<embed>标签，允许使用脚本。
注释：Adobe SVG Viewer推荐您使用<embed>标签来将SVG包含进HTML文档！但是，当你要创建有效的XHTML文档的时候，你不能使用<embed>。因为任何一个HTML的推荐标准里都不推荐<embed>标签。
语法：
<embed src="/rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释：pluginspage属性指出了插件下载的地址。
提示：IE浏览器支持一个附加的属性，wmode="transparent"，用来使HTML背景透明。
3.2 使用<object>标签
<object>标签是HTML 4的标准标签，被所有新的浏览器支持。缺点是他不支持脚本。
注意：如果你安装的最近版本的Adobe SVG Viewer，运用<object>标签SVG文件将不工作（至少不能在IE中工作）。
语法：
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注释：codebase属性指出插件下载的地址。
3.3 使用<iframe>标签
<iframe>标签可以在大部分的浏览器里工作。
语法：
<iframe src="/rect.svg" width="300" height="100">
</iframe>
3.4 我最期望的方式
如果我们可以运用SVG命名空间，直接将SVG元素添加到HTML里，那真是太棒了！就像下面这个样子：
<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
四、SVG<rect>
Svg有一些预定义的可以直接使用操作的图形元素
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
下面将详细介绍每一个元素，从rect开始。
The <rect> Tag
<rect>用来生成矩形或矩形的变种。
为了理解<rect>怎么工作，复制下面的代码到记事本，然后保存为rect1.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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
代码解释：
Width和height属性指出举行的宽和高。
style属性定义css属性
fill属性定义矩形填充的颜色（rgb值，颜色值，十六进制值）
stroke-width属性指定矩形填充线宽。
stroke属性指定矩形border颜色。
再看一个带有新属性的例子
<?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">
<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"/>
</svg>
代码解释：
x属性定义矩形的左位置（例如x="0"将矩形放在距window窗口左端0px处）
y属性定义矩形距上端的位置（例如y="0"将矩形放在距window窗口上部0px处）
CSS fill-opacity属性定义填充颜色的透明度（从0到1）
CSS stroke-opacity属性定义描边颜色的透明度（从0到1）
为整个元素定义元素例子
<?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">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
代码解释：
CSS opacit属性定义整个元素的透明度（从0到1）
下一个例子，创建一个圆角矩形
<?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">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
代码解释：
rx and ry属性定义举行的圆角
五、SVG <circle>
<circle>属性用来创建一个圆。
将下列代码复制进记事本，并保存成.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">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
View example
代码解释：
cx and cy属性定义圆心的x，y坐标，如果省略，在圆心为（0，0）
r属性定义圆的半径
六、SVG<ellipse>
<elipse>标签用来创建一个椭圆。椭圆类似于圆.不同仅仅在于椭圆有下x，y两个值不同半径，而圆的x，y半径值相同。
复制下面代码到记事本，存为ellipse1.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">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代码解释：
cx指出椭圆的中心点的x坐标
cy指出椭圆的中心点的y坐标
rx指出椭圆的横向半径
ry指出椭圆的纵向半径
下面例子创建三个叠加的椭圆：
<?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">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>
View example
下面例子将两个椭圆组合：
<?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">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>
View example
七、SVG <line>
<line>标签用来创建一条直线。
复制下列代码到记事本，存成line1.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">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代码解释：
x1指定起点的x坐标
y1指定起点的y坐标
x2指定终点的x坐标
y2指定终点的y坐标
八、SVG<polygon>
<polygon>标签用来创建一个多于三个边的图形。
父子下面代码倒记事本，存成polygon1.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">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
代码解释：
Points属性定义多边形每个角的x,y坐标
下面例子创建一个四边形
<?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">
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
九、SVG <polyline>
<polyline>用来创建由任意直线组成的图形
复制下列代码到记事本，存成polyline1.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">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
十、SVG<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 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"/>
</svg>
复杂?是的!由于path的复杂性，强烈建议使用svg编辑器来创建复杂的图形。
十一、SVG滤镜(SVG Filters)
svg滤镜用来给图形和文字添加特殊效果
可用的滤镜有以下这些：
* feBlend
* feColorMatrix
* feComponentTransfer
* feComposite
* feConvolveMatrix
* feDiffuseLighting
* feDisplacementMap
* feFlood
* feGaussianBlur
* feImage
* feMerge
* feMorphology
* feOffset
* feSpecularLighting
* feTile
* feTurbulence
* feDistantLight
* fePointLight
* feSpotLight
提示：你可以在每个元素里多重运用滤镜。
SVG高新模糊(Blur值)
一个svg滤镜必须在<defs>标签里定义。
高斯模糊
<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。
<filter>标签必须嵌套到<defs>标签里，<defs>标签是definitions的简写，允许特殊标签的定义。如filter
复制下面代码到纪事本，存为filter1.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">
<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)"/>
</svg>
代码解释：
<filter>的id属性定义filter的唯一标识名(滤镜可以文档中的多个元素使用)
filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时，#是必须的。
滤镜效果是在<feGaussianBlur>标签里定义的。fe前缀对所有滤镜有用
<feGaussianBlur>stdDeviation属性用来定义blur的值
in="SourceGraphic"定义本效果的输入源是整个图像
不同blur值得另一个例子
<?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">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
十二、SVG渐变(SVG Gradients)
一个svg渐变必须在<defs>标签里定义
svg渐变
渐变是自一种颜色到另一种颜色的逐渐过渡。另外，多个颜色渐变可以应用到相同的元素上。
有两种形式的渐变：
* Linear Gradients
* Radial Gradients
线性渐变(Linear Gradients)
<linearGradient>标签用来定义一个svg线性渐变
<linearGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
线性渐变可以被定义为，水平，垂直，角形渐变。
当y1≠y2，x1=x2时，产生水平渐变
当x1≠x2，y1=y2时，产生垂直渐变
当y1≠y2，x1≠x2时，产生角形渐变
复制下列代码到记事本，保存为linear1.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">
<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>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
代码解释：
<linearGradient>标签的id属性定义渐变的唯一标识名。
fill:url(#orange_red)属性给椭圆链接渐变
<linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
另一个例子
<?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">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
径向渐变(Radial Gradients)
<radialGradient>标签用来定义一个svg径向渐变。
<radialGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
复制下列代码到记事本，保存为linear1.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">
<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>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
代码解释：
<radialGradient>的id属性定义了渐变的唯一标志名
fill:url(#gray_blue)属性给椭圆链接渐变
cx,cy,r属性定义外圆，fx,fy定义内圆
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
另一个例子
<?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">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" 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>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
十三、SVG的元素(SVG Examples）
SVG Shapes
A rectangle
A rectangle with opacity
A rectangle with opacity 2
A rectangle with rounded corners
A circle
An ellipse
Three ellipses on top of each other
Two ellipses
A line
A polygon with three sides
A polygon with four sides
A polyline
A path
A spiral
SVG Filters
A feGaussianBlur filter
Another feGaussianBlur filter
A feBlend filter
A feColorMatrix filter
A feComponentTransfer filter
A feOffset filter
feOffset, feFlood, feComposite, feMerge, and feMergeNode
A feMorphology filter
* Filter 1
* Filter 2
* Filter 3
* Filter 4
* Filter 5
* Filter 6
SVG Gradients
Grad linear (horizontal gradient)
Grad linear (vertical gradient)
Grad radial
Grad radial 2
SVG Misc
Add an <a> element to a rectangle. The rectangle will act as a hyperlink
Use a JavaScript to create an a element when the user clicks on a circle
Rectangle that repeatedly fade away over 5 seconds
Animate the x, y, width, and height attributes of a rectangle and change the color of the rectangle
Three rectangles that will change color
Text that will move along a motion path
Text that will move, rotate and scale along a motion path
Text that will move, rotate and scale along a motion path + a rectangle that will "grow" and change color
十四、SVG Elements
The links in the "Element" column point to attributes and more useful information about the specific element.
[***表格]
分享到：
发表评论
相关推荐
最全的SVG教程 SVG语法教程指南中文版 SVG教程 SVG 全面教程
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的...
块的语法高亮 用法 1.获取费特 在可以提供服务的地方检查 Fett 存储库。 您的样式指南的主页将是index.html 。 Fett 本身是一个网站，最好与您自己的网站同时提供服务。 如果您使用版本控制系统，建议您在站点存储...
弹性布局-语法【翻译】：非常好的flex相关属性教程 弹性布局-实例 标准 《CSS揭秘》 图标 阿里巴巴矢量图标库 1.3. HTML html 《HTML5与CSS3基础教程(第8版)》 svg 《SVG精髓》 canvas canvas video 网页视频播放 ...
图形Fhir SVG图形生成器，用于实施指南安装dotnet工具安装--global Eir.FGraph 更新dotnet工具卸载--global Eir.FGraph dotnet工具安装--global Eir.FGraph命令行选项FGraph只有一个可选的命令行选项。 此选项是用于...
简单的类似Ruby / Python的语法 在浏览器或NodeJS中运行 递归和功能编程支持 不变的Python样式列表 对于艺术家，研究人员，程序员以及任何想要使用功能方法来可视化其代码的人来说， Oblivion是理想的编程语言。 在...
当然，用铅笔和指南针构造这种复杂的几何体是很费时的。 在投入大量昂贵的材料之前，我需要一个试验台来测试其形式和颜色。ReactJS + SVG == 只要我能破解几何图形，JavaScript和SVG都可以让我快速对此模型进行原型...
Ex4.0共2个压缩包特性，《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
它完成了所有这些： Spring 动画 简单的关键帧语法 手势（拖动/点击/悬停） 布局和共享布局动画 SVG 路径 退出动画 服务器端渲染 用于跨组件协调动画的变体 CSS 变量......等等。 快速入门 npm install framer-...
快速入门指南： 这个 CSS3 字体转换器是一个 shell 脚本，它允许开发人员使用命令行将一组字体，TTF/OTF/WOFF/WOFF2 转换为所有其他当前使用的 CSS3 @font-face 格式（即 EOT、SVG、WOFF , WOFF2)。 句法： css3...
│ ├── font-svg │ ├── html │ │ ├── Templates │ │ ├── boilerplate │ │ └── fragments │ ├── js │ └── test ├── htdocs └── manager ├── grunt │ ├── ...
产品特点盖茨比v2 造型情感代码语法高亮标签搜索引擎优化网站地图生成适用于Google Rich代码段的Schema.org JSON-LD Twitter标签适用于Facebook / Google + / PinterestOpenGraph标签robots.txt Typography.js 字体...
有关语法的完整指南，请参见 。 用法 MediaWiki 使用。 （这是使用的。） WordPress的 我找到。 它可能对您有用； 我还没试过 潘多克 Code Club使用其自己的工具生成其项目指南的PDF版本。 它使用他们编写的插件...
样式指南的一组标准规则格式化 Elm 源代码 836 9 在 Elm 中键入 CSS。 751 10 Elm 语法和特性概述 711 11 Elm 的所有核心开发工具包 668 12 用于使用 Elm 制作 Web 应用程序的 UI 库 644 13 在 Elm 中编写 React ...
HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的...