0

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

enter image description here

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 )

code

user3501613
  • 596
  • 7
  • 28
  • 3
    Possible duplicate of [Adding an image within a circle object in d3 javascript?](http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript) – thatOneGuy Oct 10 '16 at 12:20
  • @thatOneGuy : my requirement is not like this, in this example we can set either image or transparent(fill) but not both. I want to set that image as background and also i want to fill that circle according to some value. in that example they will fill image on mouse hour and fill transparent on mouse out. this concept will work in my above code also – user3501613 Oct 10 '16 at 12:37

0 Answers0