SVG操作笔记

作者: oNexiaoyao | 来源:发表于2017-08-16 22:32 被阅读76次

SVG操作笔记
SVG学习笔记
SVG 学习笔记
参考
svgjs入门教程1
推荐SVG教程系列
操作svg的javascript库
微信小程序06：svg的使用
微信小程序06：svg的使用
HTML5|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标签内嵌脚本代码

<g id="数字量1" transform="translate(426.000000,196.000000) " DataSource="1" Decimal="1" FontName="微软雅黑" FontSize="14" FontStyle="0" LowerColor="#999999" LowerLimit="" NormalColor="#00FF00" onmouseout="ShuZiLiang_MouseOut(event)" onmouseover="ShuZiLiang_MouseOver(event)" TagDes="测试呀" TagId="tag01" UpperColor="#FF0000" UpperLimit="" Value="123.412" ValueAction="ShuZiLiang_SetValue">
<text id="Text1" x="26.8075" y="0.400289" font-family="Microsoft YaHei" font-size="14" text-anchor="middle" fill="#00FF00" stroke="none" transform="translate(-26.807477,2.599711) ">
5126.13
</text>
<script type="text/javascript">
<![CDATA[
function ShuZiLiang_MouseOut(event) {
    if (document.getElementById('tip_box')) {
        document.getElementById('tip_box').style.display='none';
    }
}
]]>
</script>
</g>

在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) {
    ....
    })