有人可以解释一下 HTML SVG 的语法吗？答案

【问题标题】：Can somebody explain me syntax of HTML SVG?有人可以解释一下 HTML SVG 的语法吗？
【发布时间】：2019-01-07 05:27:00
【问题描述】：

我正在学习 HTML SVG。

我从网上得到了以下代码sn-ps：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
                  <!-- Starts (8, 0) with a line to position (0,0) then frm there -->
                  <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
                </pattern>
                <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
                  <rect width="80" height="80" fill="url(#smallGrid)"/>
                  <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#grid)" />
            </svg>

但我不清楚这段代码是如何工作的，主要是代码片段：

我不清楚。

我应该如何解释 d="M 8 0 L 0 0 0 8"？最后两位数是什么？

谢谢。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/SVG/Attribute/…
这是“查找有关 SVG 的教程，或查找 <path> 元素的文档”的问题。作为您可以通过简单的谷歌和阅读自己回答的问题，这不是 Stackoverflow 的问题。
developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths M 表示“移动到”，L 表示“行到”。
谢谢。我不知道在哪里寻找。
L 是线到 0 0，很明显。但在那之后还有两个坐标 0 8。它们是干什么用的？

标签： javascript html svg

【解决方案1】：

最后 2 位是隐式 LineTo 命令。

所以M 8 0 L 0 0 0 8 的意思是：

移动到 8, 0
行至 0, 0
到 0、8 行

【讨论】：