I want to fill a circle having background image using D3.I tried different ways but non of them will produce correct result. i am uploading my requirement with this question
I have that transparent image and i tried to set that image as background of that circle, that will work properly but i don't know how to fill that circle
my code
var def = svg.append("defs")
.append("pattern")
.attr("id", "image")
.attr("x", "0%")
.attr("y", "0%")
.attr("height", "100%")
.attr("width", "100%")
.attr("viewBox", "0 0 512 512")
.append("image")
.attr("x", "0%")
.attr("y", "0%")
.attr("height", "512")
.attr("width", "512")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg");
var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
.attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "30%").style("stop-color", "red");
grad.append("stop").attr("offset", "30%").style("stop-color", "white");
var tmpimgArcRad = inradius;
var arc3 = d3.svg.arc()
.innerRadius(tmpimgArcRad)
.outerRadius(0)
.startAngle(0)
.endAngle(2*Math.PI);
var background = svg.append("path")
.attr("d", arc3)
// .style("fill", "url(#image)")
.style("fill", "url(#grad)")
.style("stroke", "black")
.style("stroke-width", "1");
here i am trying to add that image and that linearGradient into same circle but this logic is not correct
so please help me with any other logic
jsfiddle (in this example i am using one temporary image )