CODEWITHSUNDEEP
csssvgdata-uri
Furkan
Furkan

Reputation: 19

Inline stylings within SVG elements not applied when using data URI

I'm encountering an issue with inline styles within an SVG element not being respected when I convert the SVG to a data URI and embed it as an image. Everything works and I can render the svg and the images after converting to the URI but stylings does not work.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 100 700 300" style="enable-background:new 0 0 750 500;" xml:space="preserve">
   <g>
     <image style="display: none;" xlink:href="some-image-link"></image>
   </g>
 </svg>

Specifically, the display: block; style on the element is not working when I use the data URI method. The image is displayed even though it should be hidden.

<img src="data:image/svg+xml;base64,'. base64_encode(svg_string) .'"/>

and this the how I convert the SVG.

Any guidance or suggestions would be greatly appreciated. Thanks!

Upvotes: 0

Views: 60

Answers (0)

Related Questions