D3.js svg circle image as background

[ani]

I am using svg pack for my project.

I need to put an image as a background in svg circle..

so it looks cool :) with glassy effect

But it doenst work

css
---
circle.child {
  background-image: url(bg1.png);
}
---

Or if anyone know anyother way to make effective background which works in svg please let me know

Thanks

Anil

[Kelvin Luck]

You need to add a pattern to the <defs> section of your generated SVG document e.g.

<pattern id="tile-ww" patternUnits="userSpaceOnUse" width="6" height="6"><image xlink:href="/images/tile-worldwide.png" x="0" y="0" width="6" height="6"></image></pattern>

Then you can assign the id of your pattern as the fill in CSS:

svg circle {

  fill: url(/#tile-ww);

}

You can see this technique in action providing the background graphic on the bars here:

http://007.lucklaboratories.com/

Hope it helps,

Kelvin :)

[Kelvin Luck]

I should have mentioned how to set up the pattern in the defs of the generated svg:

            var svg = d3.select(this.el)
                .append('svg')
                .attr('class', 'chart')
                .attr('width', this.graphWidth)
                .attr('height', this.graphHeight);
            var defs = svg.append('svg:defs');
            defs.append('svg:pattern')
                .attr('id', 'tile-ww')
                .attr('patternUnits', 'userSpaceOnUse')
                .attr('width', '6')
                .attr('height', '6')
                .append('svg:image')
                .attr('xlink:href', '/images/tile-worldwide.png')
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', 6)
                .attr('height', 6);

Hope it helps!

Kelvin :)