CODEWITHSUNDEEP
javascriptcsssvg
Jonathan Cakes
Jonathan Cakes

Reputation: 319

Looking to combine CSS fill color and SVG pattern on an SVG element

I'd like to use the awesomeness of CSS to style SVG elements in combination of 2 things: fill color and texture. My textures are created using SVG patterns that have a stroke but no fill. But even though the pattern has no fill it still won't allow a CSS fill color to be visible through the strokes.

http://jsfiddle.net/9MTB6/

A segment from the fiddle:

.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 the fiddle example, I show how I'd like to combine CSS classes so that the third row of rectangles can have both a 'texture' pattern and a fill color. It would be too tedious to define an SVG pattern for each combination (ex: 4 textures X 3 fill colors x 2 selected/unselected = 24 patterns needed!). So my question:

Can I make the pattern behave like a transparent PNG? (so the empty white portion of the pattern allows the fill color to show beneath)?

------- EDIT:

My last idea before I resort to Peter's solution:

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

Is there any way to use CSS combination of selectors to target the 'myfill' path when it's in different contexts (cell_connected versus cell_default)?

Upvotes: 3

Views: 7256

Answers (1)

Peter Collingridge
Peter Collingridge

Reputation: 10969

You can't do quite what you want because when you set the fill to the texture you overwrite the original fill. The only way I can see around this is to write two rects on top of each other and only texture the top one.

For example:

<rect x="20" y="115" width="32" height="32"
    style="stroke: black;"
    class="cell_default" />

<rect x="20" y="115" width="32" height="32"
    style="stroke: black;"
    class="texture_vertical" />

It's not ideal, but it works.

Upvotes: 1

Related Questions