【问题标题】:Interpreting svg paths created in inkscape解释在inkscape中创建的svg路径
【发布时间】:2015-09-22 14:04:20
【问题描述】:

我正在尝试使用由 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"

【问题讨论】:

    标签: svg inkscape


    【解决方案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 坐标从 Y=0 位于顶部的 SVG 约定翻转到 Y=0 位于底部的笛卡尔约定。

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

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

    你所追求的字符串是哪个(有细微的舍入差异)。

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

    【讨论】:

    • 这是我缺少的 UI 约定,需要从路径值中减去高度。非常感谢!
    • 差不多 2 年后我遇到了类似的问题,这个答案再次帮助了我。希望我能再次投票!
    猜你喜欢
    • 2020-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多