CODEWITHSUNDEEP
javascriptsvg
jmac
jmac

Reputation: 7128

How can I replace an SVG shape with an image?

Given an SVG like the one from this Google Visualization Example, there are circles drawn on the svg like this:

<circle cx="448.0843694002127" cy="236.6677163333033" r="12" stroke="#cccccc" stroke-width="1" fill="#0000ff"/>

I tried using firebug to manually replace that with a sample image at the same x/y coordinates, so for instance replacing the above code with:

<img width="50px" height="50px" cy="135.71439117815066" cx="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

But that doesn't work (nothing seems to render properly). I thought perhaps using cx/cy was the issue, so I tried switching those to just regular x/y properties:

<img width="50px" height="50px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png" x="343.43783232923863" y="135.71439117815066">

Again, no-go.

I tried the technique used here:

Does SVG support embedding of bitmap images?

But again, it didn't render the image in the SVG.

I checked all over Stack Overflow, but found information only on how to tile a circle with an image:

Add a background image (.png) to a SVG circle shape

This has its own set of images as the pattern just tiles and can't be resized for each shape.

Is there any reliable way of doing this? Ideally, I want to loop through each circle and replace it with an image that will be sized to the circle it replaces.

I downloaded the SVG and added the image manually, but I get the following error:

XML Parsing Error: prefix not bound to a namespace

Location: (removed for privacy)

Line Number 2, Column 1:<image width="50px" height="50px" y="135.71439117815066" x="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

^

Upvotes: 2

Views: 1190

Answers (2)

user1990602
user1990602

Reputation: 1

Just create a mask using an image. The draw the circle or any other graphics referencing the mask.

Upvotes: 0

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

The element you want is <image> not <img>.

And the attributes cx and cy are meaningless on <image> elements. You can use x and y instead (like in your second attempt), and note that you are required to specify a non-zero width and height on the <image> element (again like in your second attempt). See the svg spec for the details.

Upvotes: 1

Related Questions