SVG.图形在网页中的位置

Easter79
• 阅读 678

1、直接写在 html中,得到 svg中图形(图形A)的位置,将浮动的

移动到 图形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、

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
3年前
SVG.图形在网页中的位置
1、<svg/直接写在html中,得到svg中图形(图形A)的位置,将浮动的<div/移动到图形A的上方2、测试代码:(chromeforwindows 版本56.0.2924.87中效果OK)<!内联XHTML<!<!DOCTYPEhtmlPUBLIC"//W3C//DTDX
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k