学习SVG 重点汇总

什么是SVG？

　　Δ  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

　　Δ  SVG 用来定义用于网络的基于矢量的图形

　　Δ  SVG使用XML格式来定义图形

　　Δ  SVG 是万维网联盟的标准

　　Δ  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

---

SVG的优势在于？

　　ΔSVG 可被非常多的工具读取和修改（比如记事本）

　　ΔSVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

　　ΔSVG 是可伸缩的

　　ΔSVG 图像可在任何的分辨率下被高质量地打印　　

　　ΔSVG 可在图像质量不下降的情况下被放大，修改

　　ΔSVG 图像中的文本是可选的，同时也是可搜索的。很适合制作地图！！

　　Δ SVG 可以与 Java 技术一起运行

　　Δ SVG 是开放的标准

　　Δ SVG 是纯粹的XML文本

---

与flash相比？

• 　　SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

---

与canvas相比？

　　canvas更加原始，是基于像素处理图像 ，而SVG是基于矢量处理图像！

　　

　　↑就像画一条直线↑

　　Δ  canvas中会记录这条直线的第一个像素到最后一个像素的位置和颜色，它们的排列和数量无法改变；

　　    SVG中则会记录这条直线的起始位和终点坐标和直线的颜色，更加便于修改！

　　Δ  因为canvas是记录型的，所以当你想要缩放图片或对图像进行修改时 ，图片可能会丢失像素，也就是失真。   典型例子：表情包-_-

　　　 SVG就像乐谱，记录的是音律、节奏，不会丢失数据，所以呈现的是高保真的图像！

---

编辑SVG

　　Δ可直接嵌入HTML文件中

　　Δ可使用以下标签引入文件

　　　　<embed>|<object>|<iframe>

　　Δ<a>标签链接到svg外部文件

---

　　一些基础的图形实现 ↓

SVG <rect>

<rect>标签可创建矩形及其变种。

举个栗子~↓

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  //位于"http://www.w3.org/2000/svg"的命名空间
2　　 <rect width="300" height="100"
 　　style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
 </svg>

SVG <circle>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black"
   stroke-width="2" fill="red"/>
 </svg>

SVG<ellipse>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <ellipse cx="300" cy="80" rx="100" ry="50"   //rx定义椭圆水平半径，ry定义椭圆垂直半径
   style="fill:yellow;stroke:purple;stroke-width:2"/>
 </svg>

SVG<line>

　　创建一条直线，属性值有x1,x2,定义x轴上的起始和结束，y1,y2,定义y轴上的起始和结束;

---

SVG<polygon>

　　Δ  有一个points属性定义多边形的每个顶点的坐标；

　　Δ  有一个fill-rule属性判断一个点是否在图形内，属性值有nonzero|evenodd；

---

SVG<polyline>

　　Δ  创建任何只有直线的形状；

　　Δ  有一个points属性，是各个顶点的集合；

---

SVG<path>

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

　　大写表示绝对定位，小写表示相对定位。

　　绘制一个三角形↓

 <svg width="100%" height="100%" version="1.1"
 xmlns="http://www.w3.org/2000/svg"><path d='M350 100 L370 300 L330 300 Z'/></svg>

---

SVG <text>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

---

SVG stroke 属性

• stroke                  //设置一条直线，文本或描边的颜色
• stroke-width         //设置一条直线，文本或描边的厚度
• stroke-linecap        //使直线呈现圆角样式
• stroke-dasharray    //创建虚线

　    查看与stroke-dasharray属性相关的实用的效果

• stroke-linejoin       //描边的转角样式

---

SVG 模糊效果与滤镜

　　所有的滤镜都包含在<defs>元素中，<filter>是向图形应用滤镜的元素

　　<feGaussianBlur>元素用于创建模糊效果

　　例如：创建一个带有模糊效果的正方形，可以这样写↓

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />  //in属性设置渲染效果的范围  
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  //stdDeviation属性设置图像的模糊程度
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" /> //filter属性告诉我们要应用哪个滤镜
</svg>

　　SVG还包括很多其他效果，这里只介绍到这，大多数看文档就知道了，重点还是要在实践中去摸索其中的技巧。

　　看svg你会觉得很简单，但是真正做的时候会出现很多让人不解的结果，why？重点其实在下文↓

　　svg似乎与html很像，但是当你刚开始使用Javascript去操作这些元素时会发现那些细微的区别让人很头疼。比如......

1.获取SVGDocument

　　当使用javascript操作html文档时，首要的可能就是获取document对象，如果svg代码直接嵌入在html中，它们共用同一个documen对象，此时对他们俩来说没有什么区别。

但是更多时候，你可能是在html文档中用<iframe><object>这种标签来引入svg文件。这种情况下，元素的src属性指向的文件有自己独立的document对象，用操作html元素的方法操作svg的元素已经不再适用。这时可以使用getSVGDocument（）操作svg文件中的元素并且修改属性！

2.操作SVG的元素

　　SVG的标签结构相较于HTML更加严格，有开始标签就要有结束标签；

　　用JS创建SVG的标签时，要使用createElementNS方法来实现，并且它的第一参数必须是SVG的命名空间。就像这样↓

 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="20" height="20">
     <script type="text/javascript">
         var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
         c.setAttribute('cx', 10);
         c.setAttribute('cy', 10);
         c.r.baseVal.value = 7;
         c.setAttribute('fill', 'green');  

         document.rootElement.appendChild(c);
     </script>
  </svg>  

　　使用a标签也要在href属性中加入命名空间！

　　此外，不同于HTML元素对象可以直接对一些属性赋值，SVG元素对象都需要通过调用setAttribution（）方法来设定属性值此外，不同于HTML元素对象可以直接对一些属性赋值，SVG元素对象都需要通过调用setAttribution（）方法来设定属性值，这不是唯一方法，但却是更好的方法！

3.坐标变换

　　在svg中使用use标签对某种样式属性直接复用，例如效果中经常使用的transform属性，你可以在需要的时候直接使用！

其他的自己摸索吧~