SVG那些小事儿

SVG是 描述二维矢量图形的一种图形格式。也许有人会问，为什么不用canvas，关于SVG与canvas之争这里不做讨论（详见 http://msdn.microsoft.com/zh-cn/library/gg193983#Non_Starters ）。现在假设一个coder权衡利弊使用了SVG，那么有一些小事是需要注意的。
        1 SVG的浏览器检测
        SVG作为W3C在2003年制定的标准，在一些老字号的浏览器上当然是玩不转的。再有想当年的微软财大气粗大有不把W3C放在眼里的趋势，于是就坑苦了广大贫下码农，需要各种的兼容。所以，微软搞了一套叫做VML的东东，诞生于1999年（客观的说SVG很显然是借鉴了VML的）。说了这么多的意思就是IE6~IE8是不支持SVG的，但是可以用VML替代。到了IE9微软想通了决定支持svg，可能感觉完全走W3C的路子还有点不好意思，于是搞出了一个 SVGAngle 的东东（好吧，我突然想起了2013年11月底更新了IE11后浏览器判断语句的纠结）。
       书归正传，判断浏览器是否支持SVG首先要判断在IE9下的SVGAngle:

1. var isSVG = window.SVGAngle

复制代码

通用的SVG检测方式是：

1. document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")

复制代码

两者结合起来就是：

1. var isSVG = window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")

复制代码

再加上VML的兼容就是：

1. var isSVGorVML = window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML";

复制代码

2 关于svg text内容的兼容性问题
      通常我们会这样为text元素添加内容：

1. var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   
2. text.innerText = "test";

复制代码

这样的写法在FF和chrome下是没有问题的，但是IE10下显示不出来你添加的内容，由于SVG是一套XML语言，所以可以用textContent来添加内容

1. var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   
2. text.textContent = "test";

复制代码

3 关于SVG元素之间的遮罩问题
      SVG元素是可以部分的使用CSS样式的，比如color、cursor等，但是定位需要同svg标签元素自有的定位属性，比如圆circle的rx、ry等等。遮罩问题也是很初级，就一个原则后来者居上。
      今天暂时想到这么多，以后可以写续集。SVG的学习资料不是很多，推荐一个学习网站 http://www.w3cschool.cc/svg/svg-tutorial.html