I have a SVG and I'd like to change its color to red on some event, but you can't do that with SVG as a background-image, so you have to use CSS image-mask
. I'm using PHP to echo my CSS onto the style attribute of the div:
$jfid = "background-color:red;
-webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg);
mask-image:url(../like_icons/" . $iconfgg . ".svg)";
Like
.buttonlikee { background: transparent; outline: none; border: none; margin-left: 10px; transition: 0.8s all ease } .ts{ width: 34px; height: 32px; background-color:red; -webkit-mask-image:url(https://svgshare.com/i/CB7.svg); mask-image:url(https://svgshare.com/i/CB7.svg) }
<button class="buttonlikee"> <div class="ts"></div> </button>
This works as expected but returns a repeated image of the same SVG. So the solution would be to add no-repeat
at last like this:
$jfid = "background-color:red;
-webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat;
mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat";
This in return gives me a div full of red color and you can't see the icon like
.buttonlikee { background: transparent; outline: none; border: none; margin-left: 10px; transition: 0.8s all ease } .ts{ width: 34px; height: 32px; background-color:red; -webkit-mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat; mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat }
<button class="buttonlikee"> <div class="ts"></div> </button>
Is this a bug? What could be the solution?
no-repeat
is not a valid command for the mask-image
attribute as seen in the documentation . Instead you should use the mask-repeat
attribute like so:
.buttonlikee { background: transparent; outline: none; border: none; margin-left: 10px; transition: 0.8s all ease } .ts { width: 34px; height: 32px; background-color:red; -webkit-mask-image: url(https://svgshare.com/i/CB7.svg); mask-image: url(https://svgshare.com/i/CB7.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
<button class="buttonlikee"> <div class="ts"></div> </button>
Otherwise you can use the mask
attribute shorthand:
.buttonlikee { background: transparent; outline: none; border: none; margin-left: 10px; transition: 0.8s all ease } .ts { width: 34px; height: 32px; background-color:red; -webkit-mask: url(https://svgshare.com/i/CB7.svg) no-repeat; mask: url(https://svgshare.com/i/CB7.svg) no-repeat; }
<button class="buttonlikee"> <div class="ts"></div> </button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.