SVG Coordonnées absolues?

Question

J'ai quelques fichiers SVG qui ont beaucoup de nœuds de texte.

Je voudrais obtenir la position absolue de chacun des nœuds de texte, dans le document SVG (les documents SVG ont width = "743.75" et height = "1052.5").

Un nœud de texte par exemple ressemble à ceci:

<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> 

Comment puis-je calculer tous la matrice() transforme pour en arriver à des valeurs X et Y absolu positif pour chaque zone de texte? Y a-t-il une fonction récursive simple que je pourrais utiliser et passer dans chaque matrice à tour de rôle?

Merci!

Answer 1

J'essaie également de résoudre ce problème, sauf pour les images. La question de la récursivité est que vous devez multiplier les matrices de transformation. J'utilise NumPy. Cependant, mes calculs arrivent avec des réponses ostensiblement incorrectes. Peut-être que vous aurez plus de chance.

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

Je n'ai pas beaucoup de temps pour affiner la réponse, mais cela m'a travaillé à convertir svg coordonnées à une position absolue

//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 
    }; 
}, 

et fait utiliser le code pour faire des choses utiles:

Où

où mysvg est l'élément conteneur. ie

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

allCircleElements [0] est l'élément réel pour allCircleElements [0] .getBBox(). x est la position de x qui sera convertie par la suite à une position absolue et, finalement, le dernier paramètre (par exemple 0) est la position y être converti en une position absolue

espère que cela aide tout le monde à l'avenir

rester béni