SVG操作笔记

Js操作svg笔记

js获取svg里面某个标签元素的位置信息

• event.target.getBBox()；返回该元素的react矩形对象，这个矩形对象表示该元素的外包矩形。

创建svg元素标签及获取元素位置信息

    function ShuZiLiang_MouseOver(event) {
    if (event.target.parentNode.getAttribute('TagDes')) {
        //如果配置了TagDes的描述值
        if (document.getElementById('tip_box')) {
            //页面已经存在提示框
            document.getElementById('tip_box').style.display = 'block';
            var _obj = document.getElementById('tip_box').getElementsByTagName('text');
            _obj[0].setAttribute('x', event.target.getBBox().x);
            _obj[0].setAttribute('y', event.target.getBBox().y);
            _obj[0].textContent = event.target.parentNode.getAttribute('TagDes');
        } else {
            var _tip = document.createElementNS("http://www.w3.org/2000/svg", "g");
            _tip.setAttribute('id', 'tip_box');
            _tip.setAttribute('transform',event.target.parentNode.getAttribute('transform'));
            var _tipText = document.createElementNS("http://www.w3.org/2000/svg", "text");
            _tipText.textContent = event.target.parentNode.getAttribute('TagDes');
            _tipText.setAttribute('x', event.target.getBBox().x);
            _tipText.setAttribute('y', event.target.getBBox().y);
            _tipText.setAttribute('fill', '#555');
            _tipText.style.fontSize = '16px';
            _tip.appendChild(_tipText);
            event.target.ownerDocument.rootElement.appendChild(_tip);
        }
    }
}

svg标签内嵌脚本代码

5126.13

在html怎么获取iframe中嵌入的svgDom结构(jquery对获取svg文档支持不是很好，应使用原生js)

//console.log($('#svgdoc').contentDocument);//使用jquery不能获取文档对象
_ifrDoc = document.getElementById("svgdoc").contentDocument;
 $(_ifrDoc).find("svg").find('g').each(function (index, item) {
    ....
    })