如何知道 SVG PATH 的绝对位置？答案

【问题标题】：How to know absolute position of a SVG PATH?如何知道 SVG PATH 的绝对位置？
【发布时间】：2012-02-04 14:38:15
【问题描述】：

我有一个用 InkScape 生成的 SVG，所有 PATH 都移动到相对位置 (m)：

  <path xmlns="http://www.w3.org/2000/svg" 
        style="fill: #07fe01; 
               fill-opacity: 1; 
               display: inline; 
               stroke-width: 4px; 
               cursor: auto; 
               stroke: none; 
               opacity: 0.4; 
               filter: none; " 
         d="m 431.36764,202.65372 -20.46139,7.94003 -2.875,8.84375 -3.0625,13.21875 8.8125,0.96875 13.34375,6.84375 9.94451,-6.04527 11.96344,-1.95225 -2.3183,-6.56201 0.1291,-10.53422 z" 
         id="Rossello" 
         inkscape:connector-curvature="0"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 

         sodipodi:nodetypes="ccccccccccc"  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
         transform="translate(-0.03124997,-689.42566)" 
         onclick="mapmed.click(this)" 
         onmouseover="mapmed.over(this)" 
         onmouseout="mapmed.out(this)">
            <title id="title3042">Rosselló</title>
  </path>

我需要知道javascript中每条路径的绝对位置，但我不能。

【问题讨论】：

标签： javascript svg

【解决方案1】：

试试这样的：

        ele=$('#Rosello')[0]
        var bbox = ele.getBBox()
        var top = bbox.y + bbox.y2

在 x 方向上也应该如此。

我不确定，但我发现 getBBox 很慢。所以小心点。

【讨论】：

【解决方案2】：

我找到了一种知道绝对位置的方法。错误是试图找到绝对坐标，而不像 InkScape 中那样应用基础层平移和计数像素，从下到上，而不是像在 SVG 中那样从上到下。

按照这个陡峭的步骤来了解 PATH 的第一个节点的绝对位置（以像素为单位）：

首先获取 svg 对象的宽度和高度。 svgWidth, svgHeight.

第二次获得基本布局的转换转换。 baseTransX，baseTransY。

3rd 获取路径的第一个节点。路径X，路径Y。

如果存在则获取路径的transform translate，如果不存在则为0。pathTransX，pathTransY。

有了这个值，我们可以找到 InkScape 中第一个节点的绝对 X 和 Y：

X = baseTransX + pathTransX + pathX

Y = svgHeight - (baseTransY + pathTransY + pathY)

【讨论】：

【解决方案3】：

在我看来 normalizedPathSegList 是你想要的。

【讨论】：

谢谢罗伯特，但尝试每个方法和属性 normalizedPathSegList 总是为空
而 Chrome 没有 getNormalizedPathSegList() Uncaught TypeError: Object [object SVGPathElement] has no method 'getNormalizedPathSegList'
@corretge：那是因为它不是 yourpath.getNormalizedPathSegList()，而是 yourpath.normalizedPathSegList。
@ErikDahlström 尝试这个我得到空值，正如我在第一条评论中所说的那样。