SVG.图形在网页中的位置

最新推荐文章于 2024-03-07 10:33:34 发布

weixin_30757793

最新推荐文章于 2024-03-07 10:33:34 发布

阅读量871

点赞数

文章标签：前端 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/h5skill/p/8403810.html

版权

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、

转载于:https://www.cnblogs.com/h5skill/p/8403810.html

weixin_30757793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG.图形在网页中的位置

1、<svg/>直接写在 html中，得到 svg中图形（图形A）的位置，将浮动的<div/>移动到图形A的上方2、测试代码：（chrome for windows版本 56.0.2924.87 中效果OK）<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
复制链接

扫一扫