2

I have an SVG image with transparent background. I want to set a background color to it. I tried:

style="background-color: blue"

and 

fill="blue"

and none of them works.

Is there any way to set a background color to such element?

Here is an example in the jsfiddle: https://jsfiddle.net/672ec2n1/15

update:

I found a workaround solution by adding a rectangle which has the same size and position as the image and set the fill attribute to it.

https://jsfiddle.net/672ec2n1/17/

YHTsai
  • 31
  • 1
  • 6
  • `background-color` works for me in all the browsers I tried (Chrome, Firefox, and IE11). What browser are you using? https://jsfiddle.net/672ec2n1/12/ – Paul LeBeau Aug 31 '17 at 16:01
  • I use chrome, the red background color is from the css that set to body, not the image – YHTsai Aug 31 '17 at 16:04
  • I added an updated fiddle to my last comment. – Paul LeBeau Aug 31 '17 at 16:05
  • Might note, adding the style to the "svg" element, and not the "image" element, makes the difference. – IncredibleHat Aug 31 '17 at 16:06
  • Possible duplicate of [Default background color of SVG root element](https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element) – lumio Aug 31 '17 at 18:13

1 Answers1

1

Have you tried this?

svg {background-color: blue;}
Znaneswar
  • 3,329
  • 2
  • 16
  • 24
  • In my case, I will have some other elements under the svg tag, so I want to apply the background color only the image. – YHTsai Aug 31 '17 at 16:07
  • in that case add a class to svg tag and add color to it check this fiddle https://jsfiddle.net/Lpa6vp51/ – Znaneswar Aug 31 '17 at 16:10