我目前正在尝试寻找一种技术来确定 html5 文档中内联 SVG 路径元素的实际屏幕位置。
我想仅使用 javascript(即不是 jQuery)获取此信息，并使用它来设置 html 文件(“目标跟踪”div)中另一个元素的位置。
函数调用不会由鼠标事件触发，而是由页面加载和调整大小触发。
我的理解是下面的 findPos 函数(根据我在这里的研究)应该得到 SVG 路径的总偏移量，然后它应该等于它的实际屏幕位置。然而，它似乎只是返回容器 div 的位置。
顺便提一句 - 不幸的是，我目前没有资源来以正确的方式学习编程。我希望有一天能找到一个入门级的职位，并以比互联网搜索更有效、更结构化的方式学习，结合神秘的标准、w3schools/codecademy/等等，坦率地说，还有大量的猎枪。请原谅任何不雅的新手。 =)
<!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>
最佳答案
“路径”元素是一个 svg 元素，而不是一个 html 经典元素，所以你没有 css 偏移量，你描述它们。
检查您需要的内容:http://www.w3.org/TR/SVG/paths.html . 对于该偏移量，您应该检查描述的 moveto 部分。
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 开始，然后是其余路径。
关于javascript - 获取 HTML5 文档中 SVG 内联元素的屏幕位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8574953/