1、<svg/>直接写在 html中，得到 svg中图形（图形A）的位置，将浮动的<div/>移动到 图形A的上方
2、测试代码：（chrome for windows 版本 56.0.2924.87 中 效果OK）
1<!--内联 XHTML--> 2<!-- 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4--> 5<!--内联 HTML5--> 6<!DOCTYPE html> 7 8<html> 9<head> 10 <meta charset="UTF-8"> 11 12 13 <script type="text/javascript" > 14 <!-- 15 16 window.onload = function() 17 { 18 var svgRect = document.getElementById("svgRect"); 19 var rt = svgRect.getBoundingClientRect(); 20 console.log(rt+""); 21 console.log("rt.top : "+rt.top); 22 console.log("rt.left : "+rt.left); 23 24 console.log(""); 25 26 var divPiao = document.getElementById("divPiao"); 27 //divPiao.setAttribute("top", rt.top+"px"); 28 //divPiao.setAttribute("left", rt.left+"px"); 29 console.log("divPiao.style.top : "+divPiao.style.top); 30 console.log("divPiao.style.left : "+divPiao.style.left); 31 divPiao.style.top = rt.top +"px"; 32 divPiao.style.left = rt.left +"px"; 33 console.log("divPiao.style.top : "+divPiao.style.top); 34 console.log("divPiao.style.left : "+divPiao.style.left); 35 }; 36 37 --> 38 </script> 39 40</head> 41 42<body> 43 44 <div> 45 AAA<br/> 46 bbb<br/> 47 CCC<br/> 48 </div> 49 50 <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" > 51 <rect id="svgRect" x="100" y="100" width="100" height="200" style="stroke:black; stroke-width:2px; fill:none;"/> 52 </svg> 53 54 <div id="divPiao" style="position:absolute; top:10px; left:10px; width:100px; height:150px; background-color:red;"> 55 </div> 56 57</body> 58</html>
3、
4、
5、