了解 SVG 图像的路径答案

【问题标题】：Understanding the Path of SVG Images了解 SVG 图像的路径
【发布时间】：2020-01-03 09:50:33
【问题描述】：

我目前正在尝试了解 SVG 图片的路径功能。我从维基百科（世界地图，但除了曾经的小东西外，所有东西都被删除了）拿了一个 SVG。这是 SVG 代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   height="480"
   width="960"
   version="1.1"
   id="svg11"
   sodipodi:docname="map.svg"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
  <metadata
     id="metadata17">
    <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>
  <defs
     id="defs15" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1002"
     id="namedview13"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:zoom="256"
     inkscape:cx="959.32356"
     inkscape:cy="478.85011"
     inkscape:window-x="0"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg11" />
  <g
     id="g9"
     style="stroke:#000000;stroke-width:0.25;stroke-linejoin:bevel"
     transform="matrix(2.0368307,0,0,2.0374975,-34.589547,-22.659498)">
    <use
       xlink:href="#a"
       id="use2"
       style="stroke-width:1.5"
       x="0"
       y="0"
       width="100%"
       height="100%" />
    <g
       id="a"
       style="fill:#ffffff">

      <path
         d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
         id="path6"
         inkscape:connector-curvature="0" />
    </g>
  </g>
</svg>

我目前唯一感兴趣的部分是：

  <path
     d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
     id="path6"
     inkscape:connector-curvature="0" />

据我了解，您需要路径的命令和参数。所以m 将是“相对于当前光标位置移动）。光标是 0、0，所以它移动了 0+481.4、0+220，但之后只有没有命令的坐标。这些是怎么回事解释？这些是隐含的l 命令吗？为了更好地理解，我说的是移动后的-1,3.2。这些有什么作用？

【问题讨论】：

标签： svg

【解决方案1】：

@Mehdi 的回答并不完全正确。

如果一个命令被重复（即与前一个相同），那么它可以被省略。比如

L 1 2 L 3 4 L 5 6

可以简写为

L 1 2 3 4 5 6

M 和 m 除外。在这些情况下，L 和 l 分别被替换。

所以在@Mehdi 的例子中

d="m 481.4,220 -1,3.2"

实际上等价于

d="m 481.4,220 l -1,3.2"

此类问题的最终答案来源是Paths section of the SVG specification

【讨论】：