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.
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)?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie nicht ganz das, was Sie wollen, weil, wenn Sie legen Sie die Füllung, um die textur überschreiben Sie die original-Füllung. Der einzige Weg, ich kann sehen, um dies zu schreiben, zwei rects auf der jeweils anderen und nur die textur der oberen.
Beispiel:
Es ist nicht ideal, aber es funktioniert.