Получить положение экрана встроенного элемента SVG в документе HTML5 - PullRequest
Новая
       37

Получить положение экрана встроенного элемента SVG в документе HTML5

2 голосов
/ 20 декабря 2011

В настоящее время я пытаюсь найти метод определения фактической позиции экрана встроенного элемента пути SVG в документе html5.

Я хотел бы получить эту информацию, используя только javascript (т.е. не jQuery), и использовать ее для установки позиции другого элемента в html-файле (div для "target-tracking").

Вызов функции будет вызван не событием мыши, а загрузкой и изменением размера страницы.

Мое понимание заключается в том, что приведенная ниже функция 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>

1 Ответ

1 голос
/ 20 декабря 2011

Элемент 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 = moveto, абсолютное позиционирование. Таким образом, ваш путь начинается с х = 45,694, у = 15,319, затем следует за остальными.

...