タイトルに React と付けましたが、一部を修正すれば HTML でももちろん動作します。
<svg> で描画した矩形を斜線で塗りつぶす方法についてです。
ちなみに、斜線で塗りつぶすことをハッチングというそうです。
参考にさせていただいた記事はこちらから。
サンプルコードはこちらです。
1 2 3 4 5 6 7 8 9 | <svg width={100} height={100}> <defs> <pattern id='hatching' x="0" y="0" width="10" height="10" patternTransform="rotate(-45)" patternUnits="userSpaceOnUse" viewBox="0 0 9 9"> <rect style={{ fill: 'rgba(0,0,0,0)' }} x="0" y="0" width="10" height="10"/> <rect style={{ fill: 'red' }} width="10" height="3"/> </pattern> </defs> <rect width={100} height={100} style={{ fill: 'url(#hatching)' }} stroke='red' strokeWidth={3} /></svg> |
上記のコードでは、100×100 の赤い枠線の正方形を、赤い斜線で塗りつぶしています。
なお、赤い線以外は透過しているので、下に要素を重ねた場合は、下の要素が線の隙間から見えるようになっています。
まだ完全にコードを理解してはいないのですが、どうやら <pattern> タブで囲っている要素を繰り返し描画することでハッチングを実現しているようです。
そのため、<pattern> 内の <rect> の幅と高さを調整することで、斜線の幅を調整することができます。
このあたりの値は、お好みで調整してください。
以上、React で <svg> で描画した矩形を斜線で塗りつぶし（ハッチング）する方法についてでした。
ご参考になれば幸いです。
