Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a link that contains SVG how to change the color of SVG 
I am using 

    <pre>figure object svg{
      fill: red;
    }

but nothing happening

<figure><object data="~/Upload/XXXX.svg" type="image/svg+xml"></object></figure>






What I have tried:

figure object svg{
  fill: red;
}
Posted
Updated 1-Sep-20 16:50pm

1 solution

<figure><object data="~/Upload/XXXX.svg" type="image/svg+xml"></object></figure>
Your CSS expects to find Figure -> Object -> SVG elements, in the strict hierarchy. But all it finds is Figure -> Object and no SVG element. Not sure, but try using:
CSS
figure object {
    fill: red;
}

Your HTML document does not contain an SVG child in the object element for figure element; thus the style is not applied.

fill | CSS-Tricks[^]

Also, you can directly use your SVG media in an HTML image tag; unless you have strict reasons to prefer the figure element.
 
Share this answer
 
Comments
Maciej Los 2-Sep-20 4:31am    
5ed!
Afzaal Ahmad Zeeshan 2-Sep-20 6:41am    
Thank you, Maciej!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900