Auf der Suche zu kombinieren, CSS-füllen-Farbe-und SVG-Muster auf ein SVG-element

Ich würde gerne die awesomeness von CSS SVG-Elemente in Kombination von 2 Dingen: füllen Sie Farbe und textur. Meine Texturen sind erstellt mit SVG-Muster, die eine Kontur aber keine Füllung. Aber auch wenn das Muster nicht füllen Sie es immer noch nicht zulassen, wird eine CSS-füllen-Farbe-sichtbar durch die Striche.

http://jsfiddle.net/9MTB6/

Einen Ausschnitt aus der Geige:

.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"
/>

In der fiddle-Beispiel zeige ich Ihnen, wie ich möchte kombinieren Sie CSS-Klassen, so dass die Dritte Zeile von Rechtecken kann sowohl eine 'textur' - Muster und eine Füllfarbe. Es wäre zu mühsam, Sie zu definieren, ist ein SVG-Muster für jede Kombination (ex: 4 Texturen X 3 Füllfarben x 2 ausgewählt/nicht ausgewählt = 24 Muster erforderlich!). Also meine Frage:

Kann ich die Muster Verhalten sich wie ein transparentes PNG? (also das leere weiße Teil des Musters können Sie die Füllfarbe, um zu zeigen, unter)?

------- EDIT:

Meine Letzte Idee, bevor ich das resort zu Peter ' s Lösung:

<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"/>

Gibt es eine Möglichkeit, den Einsatz von CSS Kombination von Selektoren, um das Ziel 'myfill' Pfad, wenn es in verschiedenen Kontexten (cell_connected versus cell_default)?

Schreibe einen Kommentar