CODEWITHSUNDEEP
javascriptdomsvgpositionelement
jSgnuB
jSgnuB

Reputation: 33

Get Screen Position of SVG inline element in an HTML5 document

I am currently trying to find a technique for ascertaining the actual screen position of a inline SVG path element in an html5 document.

I'd like to obtain this information using only javascript (ie. not jQuery) and use it to set the position of another element in the html file (a "target-tracking" div).

The function call will not be triggered by a mouse event, but rather page load & resize.

My understanding is that the findPos function below (from my research here) should get the total offset of the SVG path, which should then equal it's actual screen position. However, it just seems to return the position the the container div.

As a quick aside - I unfortunately do not presently have the resources to learn programming the right way. My hope is to someday land a entry-level position and learn in a more efficient and structured way than internet searches, combing the arcane standards, w3schools/codecademy/etc, and, frankly, a hell of a lot of shotgunning. Please excuse any indecent 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>

Upvotes: 2

Views: 2864

Answers (1)

zozo
zozo

Reputation: 8602

The "path" element is a svg element not a html classic element so you don't have css offsets for it, you describe them.

Check this for what you need: http://www.w3.org/TR/SVG/paths.html. For that offsets you should check the moveto part of description.

    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, absolute positioning. So your path starts at x=45.694, y=15.319 then it follows the rest.

Upvotes: 1

Related Questions