SVG绝对坐标？

我有一些SVG文件，其中有许多文本节点。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>

如何计算所有（）将到达矩阵在正绝对X和Y值每一个文本框？是否有一个简单的递归函数可以使用并依次传入每个矩阵？

谢谢！

来源

2009-10-27 Jamie

我也试图解决这个问题，除了图像。递归的问题是你需要点乘转换矩阵。我正在使用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)

来源

2010-07-23 02:07:05

我没有太多的时间来完善这一答案，但这个工作对我来说，转换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轴位置转换到一个绝对位置

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

留祝福

来源

2016-08-17 21:36:24

SVG绝对坐标？

回答

相关问题