Geek Answers Handbook

SVG Absolute coordinates?

I have some SVG files that have many text nodes.

I would like to get the absolute position of each of the text nodes in an SVG document (SVG documents have width = "743.75" and height = "1052.5").

An example node text is as follows:

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

How can I compute all matrix () conversions to achieve positive absolute X and Y values ​​for each text field? Is there a simple recursive function that I could use and pass in each matrix?

Thanks!

+4
source share
2 answers

I am also trying to solve this problem besides images. The question about recursion is that you need to multiply the transformation matrices. I am using NumPy. However, my calculations come up with supposedly incorrect answers. Maybe you are more lucky.

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)
+1
source

I don’t have much time to clarify this answer, but it helped me convert svg coordinates to absolute position

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

and actually use the code to create useful things:

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

where mysvg is a container element. i.e.

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

allCircleElements [0] is a valid element for allCircleElements [0] .getBBox (). x is the position of x, which will be converted later to the absolute position, and finally, the last parameter (i.e. 0) is the y-position to convert to absolute position

hope this helps anyone in the future

remain blessed

0
source

More articles:


All Articles