使用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。

 

祝大家學習工作愉快！