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.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 位置到一个绝对的位置

希望它可以帮助任何人在未来

保持祝福