Svg 前端实践总结

本文是学习和使用svg的一些总结，不介绍svg作图的方法。

svg标签元素参考： MDN - svg

结构化标签也可参考： SVG中的结构化、分组和引用元素

svg的icon方案，参考： 腾讯干货！超实用的高清图标SVG解决方案全总结（下）

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

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

对于object、iframe来引入的svg对象，还可以使用 contentDocumnet 属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。

*** 作的前提需要满足 同源策略(Same-origin policy) ，跨域将无法获取document对象。

平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于百度地图的缩放平移机制）。

关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细： 理解SVG viewport,viewBox,preserveAspectRatio缩放 。这里谈谈在具体的应用场景中如何利用这些属性。

总结起来：

没有动画需求，没有多色图标的需求，还是使用font-class会更好，反之使用svg更好

建议复制到IDE中格式化后再看[dog/]

总的来说主要最关键的有两部分：

如果脚本加载完毕后此时你的dom元素大概是这样的：

在使用时你在任意位置使用dom就是这个样子

总结：其中原理就是当svg脱离文档流后symbol就能够在任意位置被svg进行引用，多么奇妙的技巧

可以用sublime_text打开svg图，从浏览器查看dom元素位置找到你想添加ID的代码，然后从svg图中找到该行代码，手动添加ID 获取时用var aaa= svgDocument.getElementById("aaa")获取就可以了，

---