英文:
Understanding the Path of SVG Images
问题
我目前正在尝试理解SVG图像的路径函数。我从维基百科上获取了一个SVG图像（世界地图，但除了一个小部分外，所有内容都已删除）。以下是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" />
根据我的理解，SVG路径命令由命令字符和参数组成。在这里，m 表示相对于当前光标位置的移动（"move relative to current cursor pos"）。初始光标位置是（0，0），所以它移动了0+481.4，0+220，但之后只有坐标没有命令。这些如何解释呢？这些是否隐含了l命令？为了更好地理解，我将讨论移动后的 -1,3.2 这部分。它表示什么意思？
请注意，SVG路径命令的默认行为是"线性"（即l命令），因此在这种情况下，-1,3.2 被解释为相对于当前光标位置的直线段。具体来说：
-1表示在水平方向向左移动1个单位。3.2表示在垂直方向向下移动3.2个单位。
这两个值合并起来，描述了从当前光标位置开始的相对路径段。这个路径段将从(481.4, 220)的位置向左移动1个单位，然后向下移动3.2个单位。
SVG路径命令的其他常见命令包括"l"（线性），"c"（贝塞尔曲线），"a"（椭圆弧）等，每个命令都有不同的参数和行为。在您的示例中，使用的是默认的"线性"命令。如果需要其他类型的路径，需要使用相应的命令字符和参数来描述它们。
英文:
I am currently trying to understand the path function of SVG Images. I took a SVG from Wikipedia (map of the world, but everything is removed except for once little thing). This is the SVG Code:
<?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>
The only part I am currently interested in is:
<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" />
From what I understood, you need a command and parameters for the path. So the m would be "move relative to current cursor pos). The cursor is 0, 0, so it moved 0+481.4, 0+220, but after that there are just coordinates without a command. How are these to be interpreteted? Are these implicit l commands? For better unstanding, I am talking e.g. about -1,3.2 after the move. What does these do?
答案1
得分: 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";
关于这类问题的权威来源是SVG规范的路径部分。"
英文:
The answer by @Mehdi is not quite correct.
If a command is repeated (ie. the same as the previous one) then it can be omitted. So for example
L 1 2 L 3 4 L 5 6
can be abbreviated to
L 1 2 3 4 5 6
The exception is for M and m. In those cases L and l are substituted respectively.
So in @Mehdi's example
d="m 481.4,220 -1,3.2"
is actually equivalent to
d="m 481.4,220 l -1,3.2"
The definitive source for answers to questions like these is the Paths section of the SVG specification
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论