Modify SVG fill color when being served as Background-Image

后端 未结 16 1015
再見小時候
再見小時候 2020-11-22 06:31

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

po         


        
相关标签:
16条回答
  • 2020-11-22 07:18

    Use the sepia filter along with hue-rotate, brightness, and saturation to create any color we want.

    .colorize-pink {
      filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
    }
    

    https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

    0 讨论(0)
  • 2020-11-22 07:19

    Late to the show here, BUT, I was able to add a fill color to the SVG polygon, if you're able to directly edit the SVG code, so for example the following svg renders red, instead of default black. I have not tested outside of Chrome though:

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
        <polygon 
    
    
            fill="red"
    
    
            fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
    47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
    </svg>
    
    0 讨论(0)
  • 2020-11-22 07:20
     .icon { 
      width: 48px;
      height: 48px;
      display: inline-block;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
      background-size: cover;
    }
    
    .icon-orange { 
      -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
      filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
    }
    
    .icon-yellow {
      -webkit-filter: hue-rotate(70deg) saturate(100);
      filter: hue-rotate(70deg) saturate(100);
    }
    

    codeben article and demo

    0 讨论(0)
  • 2020-11-22 07:24

    You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element.

    .icon {
        background-color: red;
        -webkit-mask-image: url(icon.svg);
        mask-image: url(icon.svg);
    }
    

    For more see this great article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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