使用JavaScript/JQuery 操作SVG元素的几个关键技巧

不得已的原因填了一下js操作svg这个坑，从网上看到的技巧主要还是js的，使用jquery的原因主要还是筛选方便。

1、使用img、iframe载入svg的情况请查看http://blog.iderzheng.com/something-about-svg-with-javascript/介绍的更全面，获取SVG对象主要采用getSVGDocument()方法，语法如下：

var svgDoc = document.getElementById("svgembed").getSVGDocument();

2、要获取<g>(个人理解是画布)的宽高，注意将JS和JQuery对象切换使用，再通过getBBox()方法获取，语法：

var svgGWidth = $(svgObj).children("g")[0].getBBox().width;
var svgGHeight = $(svgObj).children("g")[0].getBBox().height;

3、获取<g>的位移量transform，可以通过attr("transform")方法获取，语法：

var transformStr = textObjs.eq(i).parent('g').attr("transform");

得到的是transform(100.123,200.321)这种形式的字符串，可以通过截取字符串的方式获得x，y。

 

祝大家学习工作愉快！