Inline stylings within SVG elements not applied when using data URI

55 views Asked by At

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!

0

There are 0 answers