SVG测试.DIV浮在SVG的表面

1、通过 漂浮的DIV（div_漂浮_悬浮[ https://www.cnblogs.com/h5skill/p/5260819.html ]） + 计算设置各种图形的位置，使得 DIV正好位于 SVG图形表层的某个特定位置

　　ZC：这个文章中，使用的是 absolute绝对定位，应该相对定位也可以 只要找好参照图形即可  可能比较复杂...

2、测试代码：

<!--内联 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-10-25 15:50  Html5Skill  阅读(1028)  评论(0)  编辑  收藏  举报