Svg 前端实践总结

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

本文是学习和使用svg的一些总结，不介绍svg作图的方法。
　　svg标签元素参考：MDN - svg
　　结构化标签也可参考：SVG中的结构化、分组和引用元素
　　svg的icon方案，参考：腾讯干货！超实用的高清图标SVG解决方案全总结（下）

一、通过js生成svg元素

svg与普通html元素不同，需要指定命名空间，所以使用createElement()、appendChilde()抑或JQ的append()方法添加到dom上的svg元素是无法正常显示的。需要用到createElementNS(ns,'svg')，另外有些svg标签也需要单独的命名空间，例如a标签。为了避免每次添加这么长的命名空间，使用时可以简单包装下(NS_SVG、NS_XLINK分别为svg和a标签命名空间)：

    var 
        NS_SVG = "http://www.w3.org/2000/svg",
        NS_XLINK = "http://www.w3.org/1999/xlink";
    
    var _createSvgEle = function(tagName){
        return document.createElementNS(NS_SVG,tagName);
    };
    
    _createSvgEle('a').setAttributeNS(NS_XLINK,
                     'xlink:href', 
                     'http://baidu.com');

二、通过js操作svg元素

SVG如果是嵌套在HTML中的话，即使用svg标签，会和其他dom元素共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象；如果使用object、embed、iframe标签来引入svg,则其中的内容会有自己document对象，此时的操作需要借助getSVGDocument()方法：

    document.getElementById('svg-foreign').getSVGDocument();

对于object、iframe来引入的svg对象，还可以使用contentDocumnet属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。
　　操作的前提需要满足同源策略(Same-origin policy)，跨域将无法获取document对象。

三、svg平移、缩放的应用

平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于百度地图的缩放平移机制）。
　　关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细：理解SVG viewport,viewBox,preserveAspectRatio缩放。这里谈谈在具体的应用场景中如何利用这些属性。