SVG.图形在网页中的位置

1、<svg/>直接写在 html中，得到 svg中图形（图形A）的位置，将浮动的<div/>移动到 图形A的上方

2、测试代码：（chrome for windows 版本 56.0.2924.87 中 效果OK）

<!--内联 XHTML-->
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<!--内联 HTML5-->
<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">


    <script type="text/javascript" >
    <!--

        window.onload = function()
        {
            var svgRect = document.getElementById("svgRect");
            var rt = svgRect.getBoundingClientRect();
            console.log(rt+"");
            console.log("rt.top : "+rt.top);
            console.log("rt.left : "+rt.left);

            console.log("");

            var divPiao = document.getElementById("divPiao");
            //divPiao.setAttribute("top", rt.top+"px");
            //divPiao.setAttribute("left", rt.left+"px");
            console.log("divPiao.style.top : "+divPiao.style.top);
            console.log("divPiao.style.left : "+divPiao.style.left);
            divPiao.style.top = rt.top +"px";
            divPiao.style.left = rt.left +"px";
            console.log("divPiao.style.top : "+divPiao.style.top);
            console.log("divPiao.style.left : "+divPiao.style.left);
        };

    -->
    </script>

</head>

<body>

    <div>
    AAA<br/>
    bbb<br/>
    CCC<br/>
    </div>

    <svg width="1000" height="800" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <rect id="svgRect" x="100" y="100" width="100" height="200" style="stroke:black; stroke-width:2px; fill:none;"/>
    </svg>

    <div id="divPiao" style="position:absolute; top:10px; left:10px; width:100px; height:150px; background-color:red;">
    </div>

</body>
</html>

 

3、

4、

5、

 

posted @ 2018-02-02 10:20  Html5Skill  阅读(1361)  评论(0)  编辑  收藏  举报