Question

我正在学习HTML SVG。

我从网上获得了以下代码片段：

<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 8”？最后两位数字是什么？

谢谢。

Answer 1

最后2位数字是隐式的LineTo命令。

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

移至8，0
行至0、0
线到0、8

有人可以向我解释HTML SVG的语法吗？

1 个答案: