W3CHINA_ORG讨论区
w3schools SVG教程
在W3 SCHOOLS上看到此教程,花了一天时间翻译,主要是借此机会学习,初次翻译,见笑!
一、Introduction to SVG-Svg初步
SVG is a language for describing 2D graphics and graphical applications in XML.
Svg 是一种基于xml语言的定义二维图形的应用程序。
What you should already know-你应该预先知道什么？
Before you continue, you should have some basic understanding of the following:
在继续学习之前，你应该确保你有以下知识基础：
HTML
Basic XML
If you want to study these subjects first, find the tutorials on our Home page.
如果你想先学习一下这些知识。请访问我们的主页。
What is SVG?
什么是svg?
SVG stands for Scalable Vector Graphics
Svg指的是Scalable Vector Graphics （可伸缩向量图形）
SVG is used to define vector-based graphics for the Web
Svg用来定义面向web的向量图形。
SVG defines the graphics in XML format
Svg基于xml语言定义图形。
SVG graphics do NOT lose any quality if they are zoomed or resized
当你伸缩或重新设置图形大小时，svg图形不损失质量。
Every element and every attribute in SVG files can be animated
Svg里的每一个元素和属性都可以自定义。
SVG is a World Wide Web Consortium (W3C) recommendation
Svg是一个W3C推荐标准。
SVG integrates with other W3C standards such as the DOM and XSL
Svg可以和W3C的其他推荐标准结合使用。
SVG History & Advantages-SVG的历史和优点
SVG 1.1 became a W3C Recommendation in January 2003.
SVG 1.1在2003年1月成为了w3c的推荐标准
Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the well-known organizations that have been involved in defining SVG.
Sun Microsystems, Adobe, Apple, IBM, and Kodak是一些参与定义SVG的著名公司。
Advantages of using SVG over other image formats (like JPEG and GIF):
与其他图形格式（jgeg&gif）使用SVG的优点如下：
Ø SVG files can be read and modified by a large range of tools (e.g. notepad)
Ø SVG 文件可以被很多的工具（比如记事本）阅读和编辑。
Ø SVG files are smaller and more compressible than JPEG and GIF images
Ø SVG 文件比 JPEG和GIF更小压缩比更大。
Ø SVG images are scalable
Ø SVG图像是可压缩的。
Ø SVG images can be printed with high quality at any resolution
Ø SVG图像可以以任何分辨率高清晰打印。
Ø SVG images are zoomable. Any part of the image can be zoomed without degradation
Ø SVG图像是可缩放的。图像的任何部分都可以无损失缩放。
Ø Text in SVG is selectable and searchable (excellent for making maps)
Ø SVG里的文字是可供选择和搜索（制作地图的良好功能）
Ø SVG works with Java technology
Ø SVG可以和java技术共同工作
Ø SVG is an open standard
Ø SVG是一个开放标准
Ø SVG files are pure XML
Ø SVG文件是纯xml的。
The main competitor to SVG is Flash. The two have a lot of similar features. The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.
svg的主要竞争对手是flash。两者又很多的相似特征。和flash相比的最大优点是与其他标准（比如XSL&DOM）的一致性。Flash基于的专利技术不是开放的。
The major drawback of SVG at the moment is that no browser fully supports SVG. However, the future of SVG seems bright: Mozilla and Microsoft plan to fully support SVG. Adobe GoLive 5 already supports SVG and the number of SVG editors are growing.
当前，svg的最大缺点是没有完全支持svg的浏览器。但是，svg的未来是非常光明的： Mozilla 和Microsoft计划完全支持svg。Adobe GoLive 5已经完全支持svg，svg编辑软件的数量也在扩大。
Look at the official W3C list of implementations of SVG
To view SVG files today, you will have to install a plug-in such as the Adobe SVG Viewer.
现在你必须安装类似the Adobe SVG Viewer的插件才能浏览svg文件。
[此贴子已经被admin于2006-4-9 22:26:11编辑过]
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 19:42:00 鲜花(0) 鸡蛋(0)
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第2楼
因为不支持html代码，有部分没有发布出来，完整版本请参阅我的blog
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 19:46:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第3楼
二、SVG Example－svg实例
SVG is written in XML.－svg是用xml书写的
The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:
下面的例子是一个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>
Code explanation:－代码解释
The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.
第一行包含了xml声明。注意standalone属性，这个属性规定本svg文件是独立的还是包含一个对外部文件的引用。
standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.
standalone="no"意味着本svg文档包含一个对外部文件的引用，比如说DTD文件。
The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements.
第二、三行指定外部的DTD。该DTD"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"，在W3C网站上，并包含所有可用的svg元素。
The SVG code begins with the <svg> element, which consists of the opening <svg> tag and the closing </svg> tag. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version to be used and the xmlns attribute defines the SVG namespace.
Svg文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>.width和height属性用来设置svg文档的宽和高。Version属性定义了svg的版本，xmlns属性定义了svg的名称空间。
The SVG <circle> element is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines the radius of the circle.
<circle>元素用来划一个圆。cx 和 cy属性定义了圆中心点的x，y坐标。如果cx，cy省略，圆以（0，0）点为中心。r属性定义了圆的半径。
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 2px wide, black "border".
Stroke 和stroke-width属性控制图形的外轮廓。我们给圆设置了一个宽2px的黑色边框。
The fill attribute refers to the color inside a shape. We set the fill color to red.
fill属性指出了图形的颜色。我们给圆设置了红色。
The closing </svg> tag closes the root SVG element and the document.
</svg>标签结束了svg根元素和本文档。
Note: All opening tags must have closing tags!
注意：所有开始标签必须有对应的结束标签。
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:02:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第4楼
三、SVG In HTML Pages
SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.
svg文件可以运用<embed>，<object>或<iframe>标签包含进html文档中
Below you should see three different methods on how to embed SVG files into HTML pages.
下面你将看到svg包含进html文档的三种方法。
1.Using the <embed> Tag－用<embed>标签
The <embed> tag is supported in all major browsers, and allows scripting.
所有主流浏览器支持<embed>标签，允许使用脚本。
Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not listed in any HTML specification.
注意：The Adobe SVG Viewer推荐您使用<embed>标签来将svg包含进html文档！但是，当你要创建有效的xhtml文档的时候，你不能使用<embed>－任何一个html的推荐标准里都没有<embed>标签。
Syntax:－语法
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Note: The pluginspage attribute points to an URL for the plugin download.
注意：pluginspage属性指出了插件下载的地址。
Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.
tip：ie浏览器支持一个附加的属性，wmode="transparent"，用来使html背景透明。
2.Using the <object> Tag－用<object>标签
The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is that it does not allow scripting.
<object>标签是html 4的标准标签，被所有新的浏览器支持。缺点是他不支持脚本。
Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag (at least not in Internet Explorer)!
注意：如果你安装的最近版本的 Adobe SVG Viewer，运用<object>标签svg文件将不工作。
Syntax:－语法
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
Note: The codebase attribute points to an URL for the plugin download.
注意：codebase属性指出插件下载的地址。
3.Using the <iframe> Tag－用<iframe>标签
The <iframe> tag works in most browsers.
<iframe>标签可以在大部分的浏览器里工作
Syntax:－语法
<iframe src="rect.svg" width="300" height="100">
</iframe>
It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:
如果我们可以运用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技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:04:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第5楼
四、SVG <rect>
SVG has some predefined shape elements that can be used and manipulated by developers.
Svg有一些预定义的可以直接使用操作的图形元素
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
The following chapters will explain each element, starting with the rect element.
下面将详细介绍每一个元素，从rect开始。
The <rect> Tag
The <rect> tag is used to create a rectangle and variations of a rectangle shape.
<rect>用来生成矩形或矩形的变种。
To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:
为了理解 <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>
View example
Code explanation:代码解释
The width and height attributes of the rect element define the height and the width of the rectangle
Width和height属性指出举行的宽和高。
The style attribute is used to define CSS properties
style属性定义css属性
The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
fill属性定义矩形填充的颜色（rgb值，颜色值，十六进制值）
The CSS stroke-width property defines the width of the border of the rectangle
stroke-width属性指定矩形填充线宽。
The CSS stroke property defines the color of the border of the rectangle
stroke属性指定矩形border颜色。
Let's look at another example that contains some new attributes:
再看一个带有新属性的例子
<?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>
Code explanation:代码解释
The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
x属性定义矩形的左位置（例如 x="0"将矩形放在距window窗口左端0px处）
The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
y属性定义矩形距上端的位置（例如 y="0"将矩形放在距window窗口上部0px处）
The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
CSS fill-opacity 属性定义填充颜色的透明度（从0到1）
The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)
CSS stroke-opacity属性定义描边颜色的透明度（从0到1）
Define the opacity for the whole element:
为整个元素定义元素
<?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>
Code explanation:代码解释
The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)
CSS opacity属性定义整个元素的透明度（从0到1）
Last example, create a rectangle with rounded corners:
下一个例子，创建一个圆角矩形
<?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>
Code explanation:代码解释
The rx and the ry attributes rounds the corners of the rectangle
rx and ry属性定义举行的圆角
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:07:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第6楼
五、SVG <circle>
The <circle> tag is used to create a circle.
<circle>属性用来创建一个圆
Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:
将下列代码复制进记事本，并保存成.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>
Code explanation:代码解释
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
cx and cy 属性定义圆心的x，y坐标，如果省略，在圆心为（0，0）
The r attribute defines the radius of the circle
r属性定义圆的半径
六、SVG <ellipse>
The <ellipse> tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
<elipse>标签用来创建一个椭圆。椭圆类似于圆.不同仅仅在于椭圆有下x，y两个值不同半径，而圆的x，y半径值相同。
Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:
复制下面代码到记事本，存为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>
Code explanation:代码解释
The cx attribute defines the x coordinate of the center of the ellipse
cx指出椭圆的中心点的x坐标
The cy attribute defines the y coordinate of the center of the ellipse
cy指出椭圆的中心点的y坐标
The rx attribute defines the horizontal radius
rx 指出椭圆的横向半径
The ry attribute defines the vertical radius
ry指出椭圆的纵向半径
The following example creates three ellipses on top of each other:
下面例子创建三个叠加的椭圆
<?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>
The following example combines two ellipses (one yellow and one white):
下面例子将两个椭圆组合
<?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>
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:11:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第7楼
七、SVG <line>
The <line> tag is used to create a line.
<line>标签用来创建一条直线。
Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:
复制下列代码到记事本，存成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>
Code explanation:代码解释
The x1 attribute defines the start of the line on the x-axis
x1指定起点的x坐标
The y1 attribute defines the start of the line on the y-axis
y1指定起点的y坐标
The x2 attribute defines the end of the line on the x-axis
x2指定终点的x坐标
The y2 attribute defines the end of the line on the y-axis
y2指定终点的y坐标
八、SVG <polygon>
The <polygon> tag is used to create a graphic that contains at least three sides.
<polygon>标签用来创建一个多于三个边的图形。
Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:
父子下面代码倒记事本，存成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>
Code explanation:代码解释
The points attribute defines the x and y coordinates for each corner of the polygon
Points属性定义多边形每个角的x,y坐标
The following example creates a polygon with four sides:
下面例子创建一个四边形
<?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>
The <polyline> tag is used to create any shape that consists of only straight lines.
<polyline>用来创建由任意直线组成的图形
Copy the following code into Notepad and save the file as "polyline1.svg". Place the file in your Web directory:
复制下列代码到记事本，存成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>
The <path> tag is used to define a path.
<path> 标签用来创建一条路径
The following commands are available for path data:
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
Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
注意：上面所有的命令也可以表示成小写形式。大写字母表示绝对位置，小写字母表示相对位置。
Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:
复制下面代码到记事本，存成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">
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:14:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第8楼
十一、SVG Filters
SVG Filters is used to add special effects to shapes and text.
svg滤镜用来给图形和文字添加特殊效果
The available filters in SVG are:
可用的滤镜有以下这些：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
You can use multiple filters on each SVG element!
你可以在每个元素里多重运用滤镜。
SVG Gaussian Blur
An SVG Filter must be defined within a <defs> tag.
一个svg滤镜必须在<defs>标签里定义。
Gaussian Blur-高斯模糊
The <filter> tag is used to define an SVG filter. The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic.
<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。
The <filter> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as filter.
<filter>标签必须嵌套到<defs>标签里，<defs>标签是definitions的简写，允许特殊标签的定义。如filter
Copy the following code into Notepad and save the file as "filter1.svg". Place the file in your Web directory:
复制下面代码到纪事本，存为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>
Code explanation:代码解释
The id attribute of the <filter> tag defines a unique name for the filter (the same filter can be used by many elements in the document)
<filter>的id属性定义filter的唯一标识名(滤镜可以文档中的多个元素使用)
The filter:url(#Gaussian_Blur) property is used to link an element to a filter. The # character must be used when linking to the filters id
filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时，#是必须的。
The filter effect is defined with the <feGaussianBlur> tag. The fe prefix is used for all filters
滤镜效果是在<feGaussianBlur>标签里定义的。fe前缀对所有滤镜有用
The stdDeviation attribute of the <feGaussianBlur> tag defines the amount of the blur
<feGaussianBlur>stdDeviation属性用来定义blur的值
The in="SourceGraphic" part defines that the effect is created from the whole image
in="SourceGraphic" 定义本效果的输入源是整个图像
Another example with a different stdDeviation:
不同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 Gradients
An SVG Gradient must be defined within a <defs> tag.
一个svg渐变必须在<defs>标签里定义
SVG Gradients
svg渐变
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
渐变是自一种颜色到另一种颜色的逐渐过渡。另外，多个颜色渐变可以应用到相同的元素上。
There are two main types of gradients in SVG:
有两种形式的渐变：
Linear Gradients
Radial Gradients
Linear Gradients线性渐变
The <linearGradient> tag is used to define an SVG linear gradient.
<linearGradient>标签用来定义一个svg线性渐变
The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
<linearGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
Linear gradients can be defined as horizontal, vertical or angular gradients:
线性渐变可以被定义为，水平，垂直，角形渐变。
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
当y1≠y2，x1=x2时，产生水平渐变
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
当x1≠x2，y1=y2时，产生垂直渐变
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
当y1≠y2，x1≠x2时，产生角形渐变
Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:
复制下列代码到记事本，保存为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>
Code explanation:代码解释
The id attribute of the <linearGradient> tag defines a unique name for the gradient
<linearGradient>标签的id属性定义渐变的唯一标识名。
The fill:url(#orange_red) property links the ellipse element to the gradient
fill:url(#orange_red) 属性给椭圆链接渐变
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
<linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
Another 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">
<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-径向渐变
The <radialGradient> tag is used to define an SVG radial gradient.
<radialGradient>标签用来定义一个svg径向渐变。
The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
<radialGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:
复制下列代码到记事本，保存为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>
Code explanation:代码解释
The id attribute of the <radialGradient> tag defines a unique name for the gradient
<radialGradient>的id属性定义了渐变的唯一标志名
The fill:url(#grey_blue) property links the ellipse element to the gradient
fill:url(#gray_blue) 属性给椭圆链接渐变
The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
cx,cy,r 属性定义外圆，fx,fy定义内圆
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
Another 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">
<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技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
在W3 SCHOOLS上看到此教程,花了一天时间翻译,主要是借此机会学习,初次翻译,见笑!
一、Introduction to SVG-Svg初步
SVG is a language for describing 2D graphics and graphical applications in XML.
Svg 是一种基于xml语言的定义二维图形的应用程序。
What you should already know-你应该预先知道什么？
Before you continue, you should have some basic understanding of the following:
在继续学习之前，你应该确保你有以下知识基础：
HTML
Basic XML
If you want to study these subjects first, find the tutorials on our Home page.
如果你想先学习一下这些知识。请访问我们的主页。
What is SVG?
什么是svg?
SVG stands for Scalable Vector Graphics
Svg指的是Scalable Vector Graphics （可伸缩向量图形）
SVG is used to define vector-based graphics for the Web
Svg用来定义面向web的向量图形。
SVG defines the graphics in XML format
Svg基于xml语言定义图形。
SVG graphics do NOT lose any quality if they are zoomed or resized
当你伸缩或重新设置图形大小时，svg图形不损失质量。
Every element and every attribute in SVG files can be animated
Svg里的每一个元素和属性都可以自定义。
SVG is a World Wide Web Consortium (W3C) recommendation
Svg是一个W3C推荐标准。
SVG integrates with other W3C standards such as the DOM and XSL
Svg可以和W3C的其他推荐标准结合使用。
SVG History & Advantages-SVG的历史和优点
SVG 1.1 became a W3C Recommendation in January 2003.
SVG 1.1在2003年1月成为了w3c的推荐标准
Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the well-known organizations that have been involved in defining SVG.
Sun Microsystems, Adobe, Apple, IBM, and Kodak是一些参与定义SVG的著名公司。
Advantages of using SVG over other image formats (like JPEG and GIF):
与其他图形格式（jgeg&gif）使用SVG的优点如下：
Ø SVG files can be read and modified by a large range of tools (e.g. notepad)
Ø SVG 文件可以被很多的工具（比如记事本）阅读和编辑。
Ø SVG files are smaller and more compressible than JPEG and GIF images
Ø SVG 文件比 JPEG和GIF更小压缩比更大。
Ø SVG images are scalable
Ø SVG图像是可压缩的。
Ø SVG images can be printed with high quality at any resolution
Ø SVG图像可以以任何分辨率高清晰打印。
Ø SVG images are zoomable. Any part of the image can be zoomed without degradation
Ø SVG图像是可缩放的。图像的任何部分都可以无损失缩放。
Ø Text in SVG is selectable and searchable (excellent for making maps)
Ø SVG里的文字是可供选择和搜索（制作地图的良好功能）
Ø SVG works with Java technology
Ø SVG可以和java技术共同工作
Ø SVG is an open standard
Ø SVG是一个开放标准
Ø SVG files are pure XML
Ø SVG文件是纯xml的。
The main competitor to SVG is Flash. The two have a lot of similar features. The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.
svg的主要竞争对手是flash。两者又很多的相似特征。和flash相比的最大优点是与其他标准（比如XSL&DOM）的一致性。Flash基于的专利技术不是开放的。
The major drawback of SVG at the moment is that no browser fully supports SVG. However, the future of SVG seems bright: Mozilla and Microsoft plan to fully support SVG. Adobe GoLive 5 already supports SVG and the number of SVG editors are growing.
当前，svg的最大缺点是没有完全支持svg的浏览器。但是，svg的未来是非常光明的： Mozilla 和Microsoft计划完全支持svg。Adobe GoLive 5已经完全支持svg，svg编辑软件的数量也在扩大。
Look at the official W3C list of implementations of SVG
To view SVG files today, you will have to install a plug-in such as the Adobe SVG Viewer.
现在你必须安装类似the Adobe SVG Viewer的插件才能浏览svg文件。
[此贴子已经被admin于2006-4-9 22:26:11编辑过]
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 19:42:00 鲜花(0) 鸡蛋(0)
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第2楼
因为不支持html代码，有部分没有发布出来，完整版本请参阅我的blog
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 19:46:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第3楼
二、SVG Example－svg实例
SVG is written in XML.－svg是用xml书写的
The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:
下面的例子是一个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>
Code explanation:－代码解释
The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.
第一行包含了xml声明。注意standalone属性，这个属性规定本svg文件是独立的还是包含一个对外部文件的引用。
standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.
standalone="no"意味着本svg文档包含一个对外部文件的引用，比如说DTD文件。
The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements.
第二、三行指定外部的DTD。该DTD"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"，在W3C网站上，并包含所有可用的svg元素。
The SVG code begins with the <svg> element, which consists of the opening <svg> tag and the closing </svg> tag. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version to be used and the xmlns attribute defines the SVG namespace.
Svg文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>.width和height属性用来设置svg文档的宽和高。Version属性定义了svg的版本，xmlns属性定义了svg的名称空间。
The SVG <circle> element is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines the radius of the circle.
<circle>元素用来划一个圆。cx 和 cy属性定义了圆中心点的x，y坐标。如果cx，cy省略，圆以（0，0）点为中心。r属性定义了圆的半径。
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 2px wide, black "border".
Stroke 和stroke-width属性控制图形的外轮廓。我们给圆设置了一个宽2px的黑色边框。
The fill attribute refers to the color inside a shape. We set the fill color to red.
fill属性指出了图形的颜色。我们给圆设置了红色。
The closing </svg> tag closes the root SVG element and the document.
</svg>标签结束了svg根元素和本文档。
Note: All opening tags must have closing tags!
注意：所有开始标签必须有对应的结束标签。
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:02:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第4楼
三、SVG In HTML Pages
SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.
svg文件可以运用<embed>，<object>或<iframe>标签包含进html文档中
Below you should see three different methods on how to embed SVG files into HTML pages.
下面你将看到svg包含进html文档的三种方法。
1.Using the <embed> Tag－用<embed>标签
The <embed> tag is supported in all major browsers, and allows scripting.
所有主流浏览器支持<embed>标签，允许使用脚本。
Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not listed in any HTML specification.
注意：The Adobe SVG Viewer推荐您使用<embed>标签来将svg包含进html文档！但是，当你要创建有效的xhtml文档的时候，你不能使用<embed>－任何一个html的推荐标准里都没有<embed>标签。
Syntax:－语法
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Note: The pluginspage attribute points to an URL for the plugin download.
注意：pluginspage属性指出了插件下载的地址。
Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.
tip：ie浏览器支持一个附加的属性，wmode="transparent"，用来使html背景透明。
2.Using the <object> Tag－用<object>标签
The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is that it does not allow scripting.
<object>标签是html 4的标准标签，被所有新的浏览器支持。缺点是他不支持脚本。
Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag (at least not in Internet Explorer)!
注意：如果你安装的最近版本的 Adobe SVG Viewer，运用<object>标签svg文件将不工作。
Syntax:－语法
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
Note: The codebase attribute points to an URL for the plugin download.
注意：codebase属性指出插件下载的地址。
3.Using the <iframe> Tag－用<iframe>标签
The <iframe> tag works in most browsers.
<iframe>标签可以在大部分的浏览器里工作
Syntax:－语法
<iframe src="rect.svg" width="300" height="100">
</iframe>
It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:
如果我们可以运用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技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:04:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第5楼
四、SVG <rect>
SVG has some predefined shape elements that can be used and manipulated by developers.
Svg有一些预定义的可以直接使用操作的图形元素
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
The following chapters will explain each element, starting with the rect element.
下面将详细介绍每一个元素，从rect开始。
The <rect> Tag
The <rect> tag is used to create a rectangle and variations of a rectangle shape.
<rect>用来生成矩形或矩形的变种。
To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:
为了理解 <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>
View example
Code explanation:代码解释
The width and height attributes of the rect element define the height and the width of the rectangle
Width和height属性指出举行的宽和高。
The style attribute is used to define CSS properties
style属性定义css属性
The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
fill属性定义矩形填充的颜色（rgb值，颜色值，十六进制值）
The CSS stroke-width property defines the width of the border of the rectangle
stroke-width属性指定矩形填充线宽。
The CSS stroke property defines the color of the border of the rectangle
stroke属性指定矩形border颜色。
Let's look at another example that contains some new attributes:
再看一个带有新属性的例子
<?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>
Code explanation:代码解释
The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
x属性定义矩形的左位置（例如 x="0"将矩形放在距window窗口左端0px处）
The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
y属性定义矩形距上端的位置（例如 y="0"将矩形放在距window窗口上部0px处）
The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
CSS fill-opacity 属性定义填充颜色的透明度（从0到1）
The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)
CSS stroke-opacity属性定义描边颜色的透明度（从0到1）
Define the opacity for the whole element:
为整个元素定义元素
<?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>
Code explanation:代码解释
The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)
CSS opacity属性定义整个元素的透明度（从0到1）
Last example, create a rectangle with rounded corners:
下一个例子，创建一个圆角矩形
<?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>
Code explanation:代码解释
The rx and the ry attributes rounds the corners of the rectangle
rx and ry属性定义举行的圆角
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:07:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第6楼
五、SVG <circle>
The <circle> tag is used to create a circle.
<circle>属性用来创建一个圆
Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:
将下列代码复制进记事本，并保存成.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>
Code explanation:代码解释
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
cx and cy 属性定义圆心的x，y坐标，如果省略，在圆心为（0，0）
The r attribute defines the radius of the circle
r属性定义圆的半径
六、SVG <ellipse>
The <ellipse> tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
<elipse>标签用来创建一个椭圆。椭圆类似于圆.不同仅仅在于椭圆有下x，y两个值不同半径，而圆的x，y半径值相同。
Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:
复制下面代码到记事本，存为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>
Code explanation:代码解释
The cx attribute defines the x coordinate of the center of the ellipse
cx指出椭圆的中心点的x坐标
The cy attribute defines the y coordinate of the center of the ellipse
cy指出椭圆的中心点的y坐标
The rx attribute defines the horizontal radius
rx 指出椭圆的横向半径
The ry attribute defines the vertical radius
ry指出椭圆的纵向半径
The following example creates three ellipses on top of each other:
下面例子创建三个叠加的椭圆
<?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>
The following example combines two ellipses (one yellow and one white):
下面例子将两个椭圆组合
<?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>
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:11:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第7楼
七、SVG <line>
The <line> tag is used to create a line.
<line>标签用来创建一条直线。
Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:
复制下列代码到记事本，存成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>
Code explanation:代码解释
The x1 attribute defines the start of the line on the x-axis
x1指定起点的x坐标
The y1 attribute defines the start of the line on the y-axis
y1指定起点的y坐标
The x2 attribute defines the end of the line on the x-axis
x2指定终点的x坐标
The y2 attribute defines the end of the line on the y-axis
y2指定终点的y坐标
八、SVG <polygon>
The <polygon> tag is used to create a graphic that contains at least three sides.
<polygon>标签用来创建一个多于三个边的图形。
Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:
父子下面代码倒记事本，存成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>
Code explanation:代码解释
The points attribute defines the x and y coordinates for each corner of the polygon
Points属性定义多边形每个角的x,y坐标
The following example creates a polygon with four sides:
下面例子创建一个四边形
<?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>
The <polyline> tag is used to create any shape that consists of only straight lines.
<polyline>用来创建由任意直线组成的图形
Copy the following code into Notepad and save the file as "polyline1.svg". Place the file in your Web directory:
复制下列代码到记事本，存成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>
The <path> tag is used to define a path.
<path> 标签用来创建一条路径
The following commands are available for path data:
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
Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
注意：上面所有的命令也可以表示成小写形式。大写字母表示绝对位置，小写字母表示相对位置。
Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:
复制下面代码到记事本，存成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">
----------------------------------------------
交流提高呀！
svg技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn
2006-4-8 20:14:00
wanghai00
威望：4
等级：大四(总算啃完XML规范了)
文章：106
积分：1069
门派：XML.ORG.CN
院校：(无权查看)
注册：2005-10-1
第8楼
十一、SVG Filters
SVG Filters is used to add special effects to shapes and text.
svg滤镜用来给图形和文字添加特殊效果
The available filters in SVG are:
可用的滤镜有以下这些：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
You can use multiple filters on each SVG element!
你可以在每个元素里多重运用滤镜。
SVG Gaussian Blur
An SVG Filter must be defined within a <defs> tag.
一个svg滤镜必须在<defs>标签里定义。
Gaussian Blur-高斯模糊
The <filter> tag is used to define an SVG filter. The <filter> tag has a required id attribute which identifies which filter will be applied to the graphic.
<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。
The <filter> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as filter.
<filter>标签必须嵌套到<defs>标签里，<defs>标签是definitions的简写，允许特殊标签的定义。如filter
Copy the following code into Notepad and save the file as "filter1.svg". Place the file in your Web directory:
复制下面代码到纪事本，存为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>
Code explanation:代码解释
The id attribute of the <filter> tag defines a unique name for the filter (the same filter can be used by many elements in the document)
<filter>的id属性定义filter的唯一标识名(滤镜可以文档中的多个元素使用)
The filter:url(#Gaussian_Blur) property is used to link an element to a filter. The # character must be used when linking to the filters id
filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时，#是必须的。
The filter effect is defined with the <feGaussianBlur> tag. The fe prefix is used for all filters
滤镜效果是在<feGaussianBlur>标签里定义的。fe前缀对所有滤镜有用
The stdDeviation attribute of the <feGaussianBlur> tag defines the amount of the blur
<feGaussianBlur>stdDeviation属性用来定义blur的值
The in="SourceGraphic" part defines that the effect is created from the whole image
in="SourceGraphic" 定义本效果的输入源是整个图像
Another example with a different stdDeviation:
不同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 Gradients
An SVG Gradient must be defined within a <defs> tag.
一个svg渐变必须在<defs>标签里定义
SVG Gradients
svg渐变
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
渐变是自一种颜色到另一种颜色的逐渐过渡。另外，多个颜色渐变可以应用到相同的元素上。
There are two main types of gradients in SVG:
有两种形式的渐变：
Linear Gradients
Radial Gradients
Linear Gradients线性渐变
The <linearGradient> tag is used to define an SVG linear gradient.
<linearGradient>标签用来定义一个svg线性渐变
The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
<linearGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
Linear gradients can be defined as horizontal, vertical or angular gradients:
线性渐变可以被定义为，水平，垂直，角形渐变。
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
当y1≠y2，x1=x2时，产生水平渐变
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
当x1≠x2，y1=y2时，产生垂直渐变
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
当y1≠y2，x1≠x2时，产生角形渐变
Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:
复制下列代码到记事本，保存为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>
Code explanation:代码解释
The id attribute of the <linearGradient> tag defines a unique name for the gradient
<linearGradient>标签的id属性定义渐变的唯一标识名。
The fill:url(#orange_red) property links the ellipse element to the gradient
fill:url(#orange_red) 属性给椭圆链接渐变
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
<linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
Another 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">
<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-径向渐变
The <radialGradient> tag is used to define an SVG radial gradient.
<radialGradient>标签用来定义一个svg径向渐变。
The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.
<radialGradient>标签必须嵌套在<defs>标签里。<defs>标签是definitions的简写，允许特殊标签的定义，比如gradients。
Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:
复制下列代码到记事本，保存为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>
Code explanation:代码解释
The id attribute of the <radialGradient> tag defines a unique name for the gradient
<radialGradient>的id属性定义了渐变的唯一标志名
The fill:url(#grey_blue) property links the ellipse element to the gradient
fill:url(#gray_blue) 属性给椭圆链接渐变
The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
cx,cy,r 属性定义外圆，fx,fy定义内圆
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
Another 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">
<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技术交流: http://greaterthanme.blog.hexun.com/list.aspx?tag=svg
svg技术交流群：24785607
svg文件共享邮箱:[email protected] password:svg.net.cn