CODEWITHSUNDEEP
htmlcsssvg
user1743703
user1743703

Reputation: 131

SVG path filled with image doesn't show up on html page

I have successfully filled my SVG path with an image using this little trick:

Fill SVG path element with a background-image

However, when I load the svg file in my html page using background: url(), it doesn't show up.

Here is my svg image opened in browser: enter image description here

And here is the same svg image on my html page: enter image description here

Does anyone know what might be going on here? Thanks.

Upvotes: 0

Views: 1053

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

SVG files loaded into <img> or as a background-image have to be completely self-contained. They cannot refer to external files (as in the image you are loading into your pattern).

What you can do to work around it is to embed your pattern image as a Data URI".

<image xlink:href="data:image/jpeg;base64,..." .../>

Upvotes: 1

Related Questions