Question

我有一个用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中每条路径的绝对位置，但我不能。

Answer 1

在我看来，normalizedPathSegList就像你想要的那样。

Answer 2

尝试这样的事情：

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

同样应该在x方向上工作。

我不确定，但我发现getBBox非常慢。所以要小心。

Answer 3

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

按照这个陡峭的程度来知道PATH的第一个节点的绝对位置（以像素为单位）：

获取svg对象的宽度和高度。 svgWidth，svgHeight。

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

第3个获取路径的第一个节点。 pathX，pathY。

第4次获取路径的变换转换（如果不存在），如果不存在，则为pathTransX，pathTransY。

使用此值，我们可以在InkScape中找到第一个节点的绝对X和Y：

X = baseTransX + pathTransX + pathX

Y = svgHeight - （baseTransY + pathTransY + pathY）

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

3 个答案: