解释在inkscape中创建的svg路径 [英] Interpreting svg paths created in inkscape

问题描述

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

I am trying to regenerate svg paths in a script using xml files created by inkscape. I understand how to interpret the d tag in the xml file, but I am having trouble with the transformations baked into the file.

我的测试文件上有一个路径，我将其简化为一个小三角形，以便于使用.来自inkscape的简单svg文件如下所示:

My test file has a path on it that I simplified down to a small triangle to make it easier to work with. The simple svg file from inkscape looks like this:

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)
它已应用了一个transform:translate(0，-918.36216).
视图框是0 0 33 134
高度= 134
宽度= 33
路径为:"m 0.10475398,1040.2201 1.79370822,0 1.4230759，-1.6612"

The path is relative (lowercase m)
It has a transform:translate of (0,-918.36216) applied to it.
The view box is 0 0 33 134
height = 134
width = 33
the path is: "m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612"

所有单位均为像素.

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

If I look at the path in inkscape I see the following 3 points in the document: 0.105,12.142 1.898,12.142 3.322,13.80

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

These are the three points I'd like to recreate in a script.

如果我以

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

我完全可以得到想要的东西，但是我不知道如何从以下方法得到这个东西:

I get exactly what I want, but I can't figure out how to get to this from:

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

推荐答案

路径字符串:

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

或移动和两条相对线.

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

If we convert the relative line coordinates to absolute (and round to three decimal places for simplicity) we get:

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)的翻译.如果现在将其应用于您的路径，我们将得到:

Now you are also applying a transform to the path. It's a translation by (0,-918.362). If if we now apply that to your path, we get:

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

Inkscape在其UI中将Y坐标从顶部为Y = 0的SVG约定翻转为底部为Y = 0的笛卡尔约定.

In its UI, Inkscape is flipping the Y coordinates from the SVG convention, where Y=0 is at the top, to the cartesian convention where Y=0 is at the bottom.

因此对于最后一步，如果我们从134(文档的高度)中减去所有的Y坐标，则会得到:

So for the final step, if we subtract all the Y coordinates from 134 (the height of the document), we get:

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

您要使用的字符串(舍入差异较小).

Which is the string you were after (with minor rounding differences).

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

这篇关于解释在inkscape中创建的svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！