svg

SVG意为可缩放矢量图

SVG使用XML格式定义图像

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

背景和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

<?xml version="1.0"  encoding="UTF-8">
        <!--XML name Space 命名空间，当前标签的使用环境-->
<svg xmlns="http://www.w3.org/2001/XMLSchema">
    <rect width="100" height="50"></rect>
</svg>

第一行包含XML声明。

version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

HTML页面嵌入SVG的4种方法

1.iframe

<iframe src="res/svg.html" frameborder="0"></iframe>

2.object

<object data="res/svg.html" type=""></object>

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

3.embed

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

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

4.svg

<svg width="600" height="600" id="s1">
  <!--<circle r="100" cx="300" cy="300" fill="red"></circle>-->
</svg>

使用SVG绘制矩形

<svg width="600" height="600" id="s">
  <rect width="100" height="100" x="0" y="0" fill="red" fill-opacity="0.5" stroke="blue" stroke-width="5" opacity="0.5"></rect>
</svg>

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
CSS 的 stroke-width 属性定义轮廓宽度
CSS 的 stroke 属性定义轮廓颜色
CSS 的 fill 属性定义背景颜色
CSS 的 opacity 定义整个元素的透明度（0-1）
CSS rx,ry产生圆角

注意：

(1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。

(2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性： rect.setAttribute('','')

(3)使用JS动态创建SVG元素，

1)用svg.innerHTML =''

2)用document.createElementNS(''命名空间,创建元素 '')，不能使用document.createElement()

(4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！

使用SVG绘制圆形

  <circle r="" cx="" cy=""></circle>

cx,cy定义原点坐标

r定义半径

剩下使用通用属性

使用SVG绘制椭圆

  <ellipse rx="" ry="" cx="" cy=""></ellipse>

rx,ry属性定义圆点x,y坐标

cx,cy属性定义水平半径，与垂直半径

使用SVG绘制直线

  <line x1="0" y1="0" x2="100" y2="0" stroke="red"></line>

stroke 属性是必须的SVG默认只有填充颜色，没有描边颜色

例题实现

<svg width="600" height="600">
  <!--公共属性放在GROUP中,-->
  <g stroke-width="30" stroke="red">
  <line x1="100" y1="150" x2="200" y2="150"></line>
  <line x1="250" y1="150" x2="500" y2="150"></line>

  <line x1="100" y1="300" x2="200" y2="300"></line>
  <line x1="250" y1="300" x2="500" y2="300"></line>

  <line x1="100" y1="450" x2="200" y2="450"></line>
  <line x1="250" y1="450" x2="500" y2="450"></line>
  </g>
</svg>

通用属性放在<g>标签中</g> 即group（小组），小组内标签继承小组的通用属性

使用SVG绘制折线

<svg width="800" height="800">
  <polyline points="100,100 600,100 100,600 350,0 600,600 100,100 " stroke="#000" fill-opacity="0"></polyline>
</svg>

注意：

1.fill-opacity="0" ,不然有背景填充

2.stroke 属性颜色赋值，要不显示不出来

3.points 去折线的点

使用SVG绘制多边形

 <polygon points="100,100 300,300 450,250" fill="red" stroke="red" ></polygon>

points 与polyline的属性一样下，x1,y1 x2,y2 定义每个角的坐标

<g fill="#f45fas">
  <polygon points="0,0 400,200 800,0"></polygon>
  <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon>
</g>

使用SVG绘制文本

<g fill="#f45fas">
  <polygon points="0,0 400,200 800,0">
    <span>你号</span> 错误

  </polygon>
  <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon>
</g>

<text font-size="30" alignment-baseline="before-edge">你好</text>
设置文本基线

提示：传统的标签不能置于SVG标签内部！同理，SVG的标签也不能放在其它元素内部！

使用SVG绘制图像

提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。

12.如何使用渐变效果

linear 线性

radial 放射性

<linearGradient ></linearGradient>元素定义线性渐变。

<linearGradient ></linearGredient>必须在defs内部

<defs >
    <linearGradient id="g1" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="red"></stop>
      <stop offset="50%" stop-color="blue"></stop>
      <stop offset="100%" stop-color="green"></stop>
    </linearGradient>
  </defs>
  <rect width="200" height="200" x="50" y="50" fill="url(#g1)"></rect>

滤镜：详细信息http://blog.csdn.net/chy555chy/article/details/53364310

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

注意：
<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果