Получить абсолютные координаты пути SVG с Javascript

Question

Я создаю программу, которая преобразует SVG-файл в мой собственный формат. Для этого я создал веб-приложение. Я использую функцию разбора DOM по умолчанию для веб-браузеров для перебора содержимого SVG.

С Javascript я могу получить элемент SVG пути с помощью:

var path = document.getElementById("path3388"); 

я могу получить сегменты пути с помощью:

var pathSegments = path.pathSegList 

Однако эти сегменты пути по сравнению с любым родителем определяется SVG элемента , Преобразования не включаются в список сегментов пути.

Есть ли способ получить абсолютные координаты этого пути, поскольку они в конечном счете используются при рисовании на экране?

Пример: скажем, я получил следующее SVG сниппет:

<g transform="translate(100, 100)"> 
    <g transform="translate(50, 50)"> 
     <path d="M 0,0 10,0 10,10"></path> 
    </g> 
</g> 

То, что я хочу, чтобы получить это координаты пути с преобразованиями двух г элементов, применяемых. В этом случае координаты пути должны быть:

[150,150], [160, 150], [160, 160] 

Answer 1

Вы хотите, чтобы сделать что-то подобное для каждого сегмента пути координат ...

var root = document.getElementById("root"); 
 
var path = document.getElementById("path"); 
 
var point = root.createSVGPoint(); 
 
point.x = 0; // replace this with the x co-ordinate of the path segment 
 
point.y = 0; // replace this with the y co-ordinate of the path segment 
 
var matrix = path.getTransformToElement(root); 
 
var position = point.matrixTransform(matrix); 
 

 
alert(position.x + ", " + position.y);

<svg id="root"> 
 
    <g transform="translate(100, 100)"> 
 
    <g transform="translate(50, 50)"> 
 
     <path id="path" d="M 0,0 10,0 10,10"></path> 
 
    </g> 
 
</g> 
 
</svg>