文章/答案/技术大牛

发布

社区首页 >问答首页 >获取SVG内联元素在HTML5文档中的屏幕位置

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

Stack Overflow用户

提问于 2011-12-20 11:49:41

回答 1查看 2.8K关注 0票数 2

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

我只想使用javascript (即.而不是jQuery)，并使用它来设置html文件中另一个元素的位置(一个“目标跟踪”div)。

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

我的理解是，下面的findPos函数(根据我在这里的研究)应该得到SVG路径的总偏移量，这应该等于它的实际屏幕位置。但是，它似乎只是返回容器div的位置。

顺便说一句--不幸的是，我目前没有资源来学习正确的编程方法。我希望有一天能找到一个入门级的职位，并以一种比互联网搜索更高效、更有条理的方式学习，把神秘的标准、w3学校/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

position

element

javascript

dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-12-20 12:22:00

"path“元素是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=移动，绝对定位。所以，您的路径从x=45.694开始，y=15.319，然后跟踪其余的路径。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8574953

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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