时间戳

首页 > 解决方案 > 了解 SVG 图像的路径

svg - 了解 SVG 图像的路径

问题描述

我目前正在尝试了解 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

解决方案

@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"

此类问题的最终答案来源是SVG 规范的路径部分

推荐阅读