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、