CODEWITHSUNDEEP
htmlsvg
David Fridley
David Fridley

Reputation: 185

SVG Circle with pattern image only renders on chrome, why not firefox and edge?

I am trying to render an image inside a circle with svg. This works on chrome, but not other browsers, what am I doing wrong?

I have included several possible ways of specifying the link to the image, href= is what works with chrome. I can't get any of these to work elsewhere. If I change the fill to #000 it fills with black - so the problem is in the pattern.

<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
            width="206.440673828125">
            <image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
                xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
                xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
        </pattern>
    </defs>
    <circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>

Upvotes: 0

Views: 158

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31770

You need to specify the height and width of your image.

Upvotes: 0

Related Questions