css - Adding radial gradient to multiple separated arcs with same center point -
i need add multiple arcs 1 svg elements (every 1 got different animation). need fill them radial gradients, now, center of radial gradient not in centre of whole svg element, in centre of specific arc. how looks now. first make of gradients need in defs.
var tmpgrad=null; for( var k = 0; k<data.length;k++){ tmpgrad = grads .append("radialgradient") .attr("gradientunits", "userspaceonuse") .attr("r", "50%") .attr("id", function(d, i) { return "grad" + k; }); tmpgrad .append("stop") .attr("offset", "0%") .style("stop-color", data[k].endcolor) .style("stop-opasity", 0); tmpgrad .append("stop") .attr("offset", "100%") .style("stop-color",data[k].startcolor) .style("stop-opasity", 1); }
then make arcs deferent options:
var width= 1200; var height=360; var oarc = d3.svg.arc() .innerradius(iradius) .outerradius(oradius); var opie = d3.layout.pie() .startangle( sa ) .endangle( ea ) .sort(null); var group = svgdrawer.append("g"); var opath = group.selectall("g") .data(opie([0,200])) .enter() .append("path"); opath .attr("fill",function(d, i){ if(i==1){ i=0; } else { = id; } return "url(#grad" + +")"; }) .attr("d",oarc) .each(function(d){ this._current = d; });
but in result said before got separated arcs gradient starting in middle of every arc element (path actually). how can solve that.
i beginner in svg , javascript subject.
Comments
Post a Comment