[解決済み] svgの簡単な塗りつぶしパターン：斜めのハッチング

質問

SVGの図形を、単色や画像、グラデーションではなく、可能であれば斜めのハッチングパターンで塗りつぶすには、どうしたらよいでしょうか。

2時間経ちましたが、何も見つかりませんでした（少なくとも2005年以降）。

私は、可能なハックは、塗りつぶしとして機能するハッチングされた PNG であると考えますが、それは理想的ではありません。

どのように解決するのですか?

斜めのハッチングについては、私もネットで調べても見つからなかったので、ここで解決策を紹介します。

<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
  <path d="M-1,1 l2,-2
           M0,4 l4,-4
           M3,5 l2,-2" 
        style="stroke:black; stroke-width:1" />
</pattern>

(パス表現に小文字の "l" があることに注意)

上記により、左下から右上まで4ピクセル間隔の斜め線が入ったハッチが作成されます。斜めの線以外に ( M0,4 l4,-4 ) の他に、パターン領域の左上と右下の端も描画する必要があります。そうしないと、線が正方形の端と交差するところでクリッピングが発生するため、quot; constricted" になってしまうからです。

このパターンで矩形を埋めるには、こうします。

<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>