Superdrac Superdrac - 1 year ago 90
CSS Question

Adding image to SVG circles

I'm trying to add some background image to

nodes "circle".

I have read a lot of stackoverflow answer and everybody is saying that we need to add a node into a to define our image.

I tried this but my image is not displaying at all.

Here is a fiddle of my code: .

What did I miss ?

<svg baseProfile="full" version="1.1" xmlns:xlink="" xmlns="" height="390" width="1629">
<g transform="translate(40,0)">
<line y2="149.3060251652327" x2="819.8567597731511" y1="222.22245513917517" x1="854.7332277213098" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="213.47136779636722" x1="768.9096407109324" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="149.3060251652327" x1="819.8567597731511" style="stroke: #999;" stroke-width="5"></line>
<g transform="translate(854.7332277213098, 222.22245513917517)">
<circle fill="url(#image1);" fillOpacity="0.5" r="16"></circle>
<text x="20" dy="3">pagx</text>
<g transform="translate(768.9096407109324, 213.47136779636722)">
<circle fill="url(#image1);" fillOpacity="0.5" r="10"></circle>
<text x="20" dy="3">xzreds</text>
<g transform="translate(819.8567597731511, 149.3060251652327)">
<circle fill="url(#image1);" fillOpacity="0.5" r="14"></circle>
<text x="20" dy="3">jzkcwv</text>
<pattern width="16" height="16" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
<image xlink:href="" height="16" width="16" y="0" x="0"></image>

Answer Source

You have a typo.


should be


Remove the semicolon.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download