解释在 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) 的 transform:translate。
视图框为0 0 33 134
高度 = 134
宽度 = 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 坐标。

解释在 inkscape 中创建的 svg 路径

Interpreting svg paths created in inkscape

svg

inkscape