javascript - SVG要素にCSS塗りつぶし色とSVGパターンを組み合わせたい

Question

CSS の優れた機能を利用して、塗りつぶしの色とテクスチャの 2 つを組み合わせて SVG 要素のスタイルを設定したいと考えています。私のテクスチャは、ストロークはあるが塗りつぶしのない SVG パターンを使用して作成されています。ただし、パターンに塗りつぶしがなくても、CSS の塗りつぶしの色がストロークから見えるようにすることはできません。

http://jsfiddle.net/9MTB6/

フィドルからのセグメント:

.texture_diagonal{
  fill: url(#texture_diagonal);
}
.cell_default{
  fill: #cccccc;
}
.cell_selected{
  stroke-width: 2px;
  stroke: #FF0000;
}

<pattern id="texture_diagonal" x="0" y="0" width="25%" height="25%" patternUnits="objectBoundingBox">
    <path d="M 0 0 l 32 32" style="stroke: black; fill: none;"/>
</pattern>

<rect x="98" y="115" 
width="32" height="32"
class="texture_diagonal cell_default cell_selected"
/>

フィドルの例では、CSS クラスを組み合わせて、3 行目の四角形が「テクスチャ」パターンと塗りつぶし色の両方を持つことができるようにする方法を示します。組み合わせごとに SVG パターンを定義するのは面倒です (例: 4 つのテクスチャ X 3 つの塗りつぶし色 X 2 つの選択/非選択 = 24 パターンが必要!)。だから私の質問：

パターンを透過 PNG のように動作させることはできますか? (つまり、パターンの空の白い部分により、塗りつぶしの色が下に表示されます)?

- - - - 編集：

Peterのソリューションに頼る前の私の最後のアイデア：

<defs>
<pattern id="texture_diagonal" x="0" y="0" width="25%" height="25%" patternUnits="objectBoundingBox">
    <path d="M 8 0 l 0 32" style="stroke: black; fill: none;"/>
    <path class="myfill" d="M 0 0 l 0 32 l 32 0 l 0 -32 l -32 0"/>
</pattern>
</defs>

<rect x="20" y="20" width="32" height="32"
    class="texture_diagonal cell_connected"/>
<rect x="59" y="20" width="32" height="32"
    class="texture_diagonal cell_default"/>

CSS セレクターの組み合わせを使用して、異なるコンテキスト (cell_connected と cell_default) にあるときに「myfill」パスをターゲットにする方法はありますか?