Question

我目前正在尝试找到一种技术，用于确定html5文档中内联SVG路径元素的实际屏幕位置。

我想仅使用javascript（即不是jQuery）获取此信息，并使用它来设置html文件中另一个元素的位置（“目标跟踪”div）。

鼠标事件不会触发函数调用，而是页面加载＆amp;调整大小。

我的理解是下面的findPos函数（来自我的研究）应该获得SVG路径的总偏移量，然后该偏移量应该等于它的实际屏幕位置。但是，它似乎只是返回容器div的位置。

快速搁置 - 遗憾的是，我目前没有资源以正确的方式学习编程。我希望有朝一日可以获得入门级职位，并以比互联网搜索更有效率和更有条理的方式学习，结合神秘的标准，w3schools / codecademy /等，坦率地说，这是一个很多镜头游戏的地狱。请原谅任何不雅的noobity。 =）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>

*{ margin: 0; padding: 0;}

html, body{ background-color: #000000; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center;}


#testDiv{ background-color: #333333; width:81%; margin: 5em auto; top: 0; right: 0; bottom: 0; left: 0; position: absolute; }

#testSVG{ background-color: #555555; width:73%; margin: 20px;}

#testGroup{ background-color: orange;}

#testPath{ fill: green;}

#testTrack{ background-color: red; width: 10px; height: 10px; position: fixed; left: 50%; top: 50%; z-index: 5;}

#testDisplay{ width: 60%; height: 60%; background-color: #DDDDDD; margin: auto; padding: 1em;}


#buttons{ background-color: #cccccc; color: blue; bottom: 0; left: 0; right: 0; position: fixed; margin: 0 auto; padding: 1em; text-align: center;}

#buttons button{ padding: .7em;}    

</style>
</head>
<body>


<div id="testDiv">
<svg id="testSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100" height="100" viewBox="0 0 75 75">
    <g id="testGroup">
        <path id="testPath" d="M45.694,15.319c6.639,2.489-1.897,18.111-1.897,18.111s17.622-0.31,17.525,4.955
            C61.222,43.65,43.51,42.18,43.51,42.18s4.793,15.838,0.702,18.197c-4.089,2.36-9.112-15.766-9.112-15.766S21.742,53.883,18.012,50.9
            c-2.783-3.219,12.181-13.539,12.181-13.539S14.477,27.5,18.927,23.053c4.446-4.447,16.638,7.4,16.638,7.4
            S39.058,12.829,45.694,15.319z"/>
    </g>
</svg>
<div id="testTrack"> </div>
    <div id="testDisplay"> this will be replaced by function test output.</div>
</div>


<div id="buttons">
<button onclick="setNewXY()">test setNewXY()</button>
<button onclick="findPos('testPath')">test findPos() for testPath ID.</button>
</div>


<script type="text/javascript" >

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
  do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
      return [curleft,curtop];}

     document.getElementById('testDisplay').innerHTML = findPos(testPath);
}


function setNewXY() {
var getPosResult = findPos(testPath).toString();
var makePosArray = getPosResult.split(',');

    document.getElementById('testTrack').style.left = makePosArray[0] + "px"; 
    document.getElementById('testTrack').style.top = makePosArray[1] + "px";
}   

</script>
</body>
</html>

Answer 1

“path”元素是一个svg元素，而不是一个html经典元素，所以你没有它的css偏移，你描述它们。

选中此项以获取所需内容：http://www.w3.org/TR/SVG/paths.html。对于该偏移量，您应该检查移动到描述的一部分。

    d="M45.694,15.319c6.639,2.489-1.897,18.111-1.897,18.111s17.622-0.31,17.525,4.955
        C61.222,43.65,43.51,42.18,43.51,42.18s4.793,15.838,0.702,18.197c-4.089,2.36-9.112-15.766-9.112-15.766S21.742,53.883,18.012,50.9
        c-2.783-3.219,12.181-13.539,12.181-13.539S14.477,27.5,18.927,23.053c4.446-4.447,16.638,7.4,16.638,7.4
        S39.058,12.829,45.694,15.319z"

M = moveto，绝对定位。所以你的路径从x = 45.694开始，y = 15.319，然后是其余部分。

获取HTML5文档中SVG内联元素的屏幕位置

1 个答案: