SVG Абсолютные координаты?

Question

У меня есть несколько файлов SVG, в которых много текстовых узлов.

Я хотел бы получить абсолютную позицию каждого текстового узла в документе SVG (документы SVG имеют ширину = "743,75" и высоту = "1052,5").

Пример текстового узла выглядит так:

 <g>
  <text transform="matrix(1,0,0,-1,106.5,732.5)">
   <tspan x="0 7.8979998 14.003 17.698999" y="0">Date</tspan>
  </text>
 </g>

Как можно вычислить все преобразования matrix (), чтобы получить положительные абсолютные значения X и Y для каждого текстового поля? Есть ли простая рекурсивная функция, которую я мог бы использовать и передавать в каждую матрицу по очереди?

Спасибо!

Answer 1

Я тоже пытаюсь решить эту проблему, кроме изображений. Вопрос рекурсии заключается в том, что вам нужно умножить матрицу преобразования. Я использую NumPy. Однако мои расчеты дают якобы неправильные ответы. Может быть, вам повезет больше.

http://www.scipy.org/Tentative_NumPy_Tutorial

http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined

from decimal import Decimal
import xml.dom.minidom as dom
from numpy import *
doc = dom.parse("labels.svg")

def walk(node):
    if node.nodeType != 1:
        return
    if node.tagName == 'image':
        href = node.getAttribute('xlink:href')
        if not href.startswith("labels/"):
            return
        name = (
            href.
            replace('labels/', '').
            replace('.png', '').
            replace('-resized', '').
            replace('-normalized', '')
        )
        left = float(node.getAttribute('x'))
        top = float(node.getAttribute('y'))
        position = matrix([left, top, float(1)])
        width = float(node.getAttribute('width'))
        height = float(node.getAttribute('height'))
        size = matrix([left, top, float(1)])
        transform = node.getAttribute('transform')
        if transform:
            a, b, c, d, e, f = map(float, transform
                .replace('matrix(', '')
                .replace(')', '')
                .split(',')
            )
            transform = matrix([
                [a, c, e],
                [b, d, f],
                [0, 0, 1]
            ])
            left, top, _ = (transform.I * position.T).A1
        print name, (left, top)
    child = node.firstChild
    while child:
        walk(child)
        child = child.nextSibling

walk(doc.documentElement)

Answer 2

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

//this will convert an x, y coordinate within a viewBox - or not in one at all (I think) - to an absolute position on the document
//my <svg>...</svg> element had a viewbox on it and it still worked...
convertCoords: function(svgElement, elementToConvert, x, y) {

    var element_x = elementToConvert.getBBox().x;
    var element_y = elementToConvert.getBBox().y;
    var offset = svgElement.getBoundingClientRect();
    var matrix = elementToConvert.getScreenCTM();

    return {
        x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left,
        y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top
    };
},

и фактически использовать код для выполнения полезных вещей:

svgGraphLibObject.convertCoords(mysvg, allCircleElements[0], allCircleElements[0].getBBox().x, 0)

где mysvg - элемент контейнера. т.е.

var mysvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

allCircleElements [0] - это фактический элемент для allCircleElements [0] .getBBox (). X - это позиция x, которая позднее будет преобразована в абсолютную позицию, и, наконец, последний параметр (т.е. 0) - это позиция y преобразовать в абсолютную позицию

надеюсь, это поможет кому-нибудь в будущем

Будь благословен