だから私はどこでも答えを探しましたが、何も見つかりませんでした。私がやろうとしている方法が正しい方法ではないためだと思いますが、確認したいだけです。
Web ゲーム (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>
それらは必要なグリッドを生成しますが、各セルを個別にターゲットにする方法がわかりません。これに関する情報が見つからなかったので推測していますが、それは不可能であり、使用する以外の他の解決策を使用する必要があります。何か案は？
注: これをグラフィック デザインに投稿しましたが、投稿した直後に、こちらの方が適切かもしれないことに気付きました。相互投稿をお詫びします。