所以我到处寻找答案，但我找不到任何东西。我假设它是因为我尝试这样做的方式不正确，但我只是想确定。
我正在尝试为网络游戏（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>
他们生产我需要的网格，但我不知道如何单独定位每个单元格。我猜测，因为我没有找到关于此的信息，这是不可能的，除了应该使用的其他解决方案。有什么想法吗？
注意：我在平面设计上发布了这个，但是在发布之后，我意识到这里可能更合适，我为交叉帖道歉。