所以我到处寻找答案，但我找不到任何东西。我假设这是因为我尝试这样做的方式不正确，但我只是想确定一下。
我正在尝试为网络游戏（HTML、JS、CSS）创建一个交互式网格，其中每个单元格都应该在悬停/单击时更改它的填充。我需要一个规则的方形网格和一个三角形网格。我希望它是基于矢量的，以便它可以很好地缩放以适应不同的屏幕尺寸。我认为最简单的方法是创建一个图案并将其填充在一个矩形上。这是我到目前为止的代码：
<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>
他们产生我需要的网格，但我不知道如何单独定位每个单元格。我猜是因为我没有找到这方面的信息，这是不可能的，应该使用其他一些解决方案。有任何想法吗？
注意：我在平面设计上发布了这个，但在发布后，我意识到这里可能更合适，我为交叉帖子道歉。