svg图形

一、SVN介绍

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 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 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>

<embed>标签被所有主流的浏览器支持，并允许使用脚本

<embed src="rect.svg" width="300" height="100" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage属性指向下载插件的URL。

<object>标签是HTML4的标准标签，被所有新的浏览器支持，但是并不允许使用脚本。

<object data="rect.svg" width="300" height="100" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

codebase属性指向下载插件的URL。

<iframe>标签可工作在大部分的浏览器中。

<iframe src="rect.svg" width="300" height="100"> </iframe>

三、SVN的使用

1.rect矩形

<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 　　

　　<rect x="20" y="20" width="300" height="100" rx="20" ry="20" style="fill:rgb(0,0,255);stroke-1;stroke:rgb(0,0,0)；

      fill-opacity:0.1;stroke-opacity:0.9" />

</svg>

• rect 元素的 x 和 y 属性可定义矩形的左侧和顶部距离

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义定义笔触颜色的透明度（合法的范围是：0 - 1）
• rect元素的 rx 和 ry 属性可使矩形产生圆角。

2.圆形circle

<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>

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r定义圆的半径

3.椭圆ellipse

<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-2"/>
</svg>

cx为圆点的X坐标，cx为圆点的y坐标

rx为水平半径，ry为垂直半径

4.线条line

<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-2"/>
</svg>
x1属性在x轴定义线条的开始，y1属性在y轴定义线条的开始

x2属性在x轴定义线条的结束，y2属性在y轴定义线条的结束

5.多边形 polygon

<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-1"/>
</svg>

points属性定义多边形每个角的x和y坐标

6.折线 polyline  

<polyline>标签用来创建仅包含直线的形状

<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-2"/>
</svg>

  7.路径 path

<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 关闭路径。

• 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
• 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

8.线性渐变 linearGradient

<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义

线性渐变可被定义为水平、垂直或角形的渐变：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

水平渐变
<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) 属性把 ellipse 元素链接到此渐变
• <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

垂直渐变
<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>

9.放射渐变 radialGradient

<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(#grey_blue) 属性把 ellipse 元素链接到此渐变，
cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。