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 n

Solution 1:

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.