svg - 操作 SVG 图案中的各个图 block

Question

我正在尝试为网页游戏(HTML、JS 等)创建一个交互式网格，其中每个单元格都应该在悬停/单击时更改其填充。我需要一个规则的方形网格和一个三角形网格。我希望它是基于矢量的，这样它就能很好地缩放以适应不同的屏幕尺寸。我认为最简单的方法是创建一个图案并将其填充在矩形上。这是我到目前为止的代码:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>

对于正方形，对于三角形网格:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>

他们生成我需要的网格，但我不知道如何单独定位每个单元格。我猜因为我没有找到这方面的信息，所以这是不可能的，并且应该使用其他一些解决方案。有什么想法吗？

编辑:我希望能够通过单击鼠标来循环不同的填充。对于方形网格，我使用在这里找到的代码:http://bl.ocks.org/bunkat/2605010但对于三角格子，我完全不知道从哪里开始。这就是我想到的原因。

PS:我可能应该补充一点，我没有编程经验，我正在尝试制作一个非图游戏来自学一些 Javascript。

Answer 1

图案纯粹是装饰性的。在图案中定位单个图 block 就像在渐变中定位单一颜色一样。最好不要将它们视为不同的“瓷砖”，而是将其视为一张重复的壁纸。

那该怎么办呢？好吧，您需要为您希望能够操纵的每个部分提供一个独特的元素。但由于它们大部分相同，因此您需要使用 <use>重复图形的元素。您需要做一些数学计算来弄清楚如何将三角形放置在正确的位置，但不会比您必须做的事情弄清楚该模式更糟糕。当然，在 JS 脚本中使用循环创建元素是最简单的，尽管您可以将原始元素硬编码在 <defs> 中。部分。

此外，您无需指定要对各个单元格执行什么操作。如果您要更改它们的外观，请记住您可以在<use>上设置样式可能会有所帮助。元素，这些将由重新使用的图形继承。因此，如果您不直接设置填充/描边，则可以通过设置<use>样式来更改它们，而不是使用单独的、不同颜色的模板进行交换。