在HTML5文檔中獲取SVG內聯元素的屏幕位置

Question

我目前正在嘗試尋找一種確定html5文檔中內聯SVG路徑元素的實際屏幕位置的技術。

我想僅使用javascript（即不是jQuery）獲取此信息，並使用它來設置html文件中另一個元素的位置（“目標跟蹤” div）。

該函數調用不會由鼠標事件觸發，而是頁面加載和調整大小。

我的理解是，下面的findPos函數（來自我的研究）應該獲取SVG路徑的總偏移量，然后應等於它的實際屏幕位置。 但是，它似乎只是返回容器div的位置。

順便說一句-不幸的是，我目前沒有資源來學習正確的編程方法。 我的希望是，有一天可以找到入門級職位，並以比互聯網搜索更有效，更結構化的方式學習，梳理奧秘的標准，w3schools / codecademy / etc，坦白地說，這真是太多了。 請原諒任何不雅之詞。 =）

<!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 classic元素，因此您沒有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，然后跟隨其余路徑。

在HTML5文檔中獲取SVG內聯元素的屏幕位置

問題描述

1 個解決方案

解決方案1
1 已采納 2011-12-20 12:22:00

在HTML5文檔中獲取SVG內聯元素的屏幕位置

問題描述

1 個解決方案

解決方案1 1 已采納 2011-12-20 12:22:00

解決方案1
1 已采納 2011-12-20 12:22:00