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

后端 未结 1 1470
一向
一向 2021-01-16 00:45

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 stro

相关标签:
1条回答
  • 2021-01-16 01:07

    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.

    0 讨论(0)
提交回复
热议问题