解释在 inkscape 中创建的 svg 路径

Question

我正在尝试使用 inkscape 创建的 xml 文件在脚本中重新生成 svg 路径。我了解如何解释 xml 文件中的 d 标记，但在文件中进行转换时遇到问题。

我的测试文件上有一条路径，我将其简化为一个小三角形，以使其更易于使用。inkscape 中的简单 svg 文件如下所示：

xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg6530"
   viewBox="0 0 33 134"
   height="134"
   width="33">
  <defs
     id="defs6532" />
  <metadata
     id="metadata6535">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     style="display:inline"
     transform="translate(0,-918.36216)"
     id="layer1">
    <path
       id="path7149"
       d="m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612"
       style="fill:#000000" />
  </g>
</svg>

该路径是相对路径（小写 m），
它应用了 (0,-918.36216) 的变换：翻译。
视图框为 0 0 33 134
height = 134
width = 33
路径为：“m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612”

所有单位均为像素。

如果我查看 inkscape 中的路径，我会在文档中看到以下 3 个点： 0.105,12.142 1.898,12.142 3.322,13.80

这是我想在脚本中重新创建的三点。

如果我从

"M 0.105,12.142 1.898,12.142 3.322,13.80" 

我得到了我想要的，但我不知道如何从以下位置得到这个：

d="m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612"

Answer 1

路径字符串：

m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612

相当于

M 0.10475398,1040.2201 l 1.79370822,0 l 1.4230759,-1.6612

或一个移动和两条相对线。

如果我们将相对线坐标转换为绝对坐标（为了简单起见，四舍五入到小数点后三位），我们得到：

M 0.105,1040.220 L (0.105+1.794),(1040.220+0) L 0.105+1.794+1.423),(1040.220+0-1.661)

或者

M 0.105,1040.220 L 1.899,1040.220 L 3.322,1038.559

现在您还要对路径应用变换。这是 (0,-918.362) 的翻译。如果我们现在将其应用到您的路径中，我们会得到：

M 0.105,(1040.220 - 918.362) L 1.899,(1040.220 - 918.362) L 3.322,(1038.559 - 918.362)

或者：

M 0.105,121.858 L 1.899,121.858 L 3.322,120.197

在其 UI 中，Inkscape 将 Y 坐标从 SVG 约定（其中 Y=0 位于顶部）翻转为笛卡尔约定（其中 Y=0 位于底部）。

因此，对于最后一步，如果我们用 134（文档的高度）减去所有 Y 坐标，我们会得到：

M 0.105,12.142 L 1.899,12.142 L 3.322,13.807

这是您想要的字符串（有较小的舍入差异）。

tl;dr：转换为绝对坐标，应用变换，翻转 Y 坐标。