Manipulating individual tiles in an SVG pattern -
i'm trying create interactive grid web game (html, js, etc.), in every cell should change it's fill on hover/click. need both regular square grid, , triangular grid. want vector based scale nicely fit different screen sizes. thought easiest way create pattern , fill on rectangle. code have far: <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> for square, , triangular grid: <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="...