使用JavaScript/JQuery 操做SVG元素的幾個關鍵技巧

不得已的緣由填了一下js操做svg這個坑，從網上看到的技巧主要仍是js的，使用jquery的緣由主要仍是篩選方便。

一、使用img、iframe載入svg的狀況請查看http://blog.iderzheng.com/something-about-svg-with-javascript/介紹的更全面，獲取SVG對象主要採用getSVGDocument()方法，語法以下：

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

二、要獲取<g>(我的理解是畫布)的寬高，注意將JS和JQuery對象切換使用，再經過getBBox()方法獲取，語法：

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

三、獲取<g>的位移量transform，能夠經過attr("transform")方法獲取，語法：

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

獲得的是transform(100.123,200.321)這種形式的字符串，能夠經過截取字符串的方式得到x，y。

 

祝你們學習工做愉快！