Hello!

How to set the background color of a png with transparent areas and inserted into the svg as an image element?

Neither background-color nor fill do not work:

image { fill: black; background-color: black; } rect { fill: green; } 
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0" y="0" width="400" height="300"></rect> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" x="0" y="0" height="400px" width="300px" /> </svg>

https://fiddle.jshell.net/6j2dLej5/

thank

  • And what result is expected if in the picture transparent areas? - Grundy
  • As an idea, transparent areas will be of a given color, as in css + html. From the code, you can dynamically change the color of the image - ravend
  • one
    apparently nothing, only as in the example - by putting a rectangle under the picture for example. - Grundy
  • On the image in svg, in general, the styles work, maybe I'm doing something wrong? added a border, but it did not appear: fiddle.jshell.net/6j2dLej5/1 - ravend

1 answer 1

There is such an option http://codepen.io/CreativeSeo33/pen/QNagYJ

 <div class="icon icon-red"></div> .icon { width: 500px; height: 500px; display: inline-block; background:url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png) no-repeat 50% 50%;} .icon-red { background-color: red; }

Why do you want to display a picture through svg?