svgコンテナの高さ/幅が高さ/幅と同じでない場合、d3の放射状の勾配が変わるのはなぜですか？

Question

私はd3.jsの放射状勾配がどのように機能するかを理解しようとしています。私はサークルを持っていて、それを 'defs'タグで指定された放射状グラデーションで塗りつぶしました。ラジアルグラジエントの 'r'座標を60％に設定し、 'cx'と 'cy'をゼロに設定しました。私の理解は、半径の勾配は常に0,0の座標（正確に私の円の要素の真ん中）から始まり、放射状の勾配の外側の円は私の "r"の60％で "停止"します。今度は私のSVGコンテナの幅だけを変更し、高さを変更しないで、放射状のグラデーションは同じではありません。放射状の勾配の外側の円が押し出されているようです。私はなぜこれが起こっているのか理解できません。オンラインで検索するのに数時間を費やしましたが、十分な答えが見つかりませんでした。高さや幅が変更されたときに放射状の勾配の形状を維持することは可能ですか？

picture 1 here この図は、私が実際に達成したいことを説明しています。私はグラデーションで円弧を塗りたい。グラデーションユニットには「userSpaceOnUse」を使用する必要があると思います。このラジアルグラデーションをここに示すように個々のセグメントに塗りつぶすためです。picture 2 here私は代わりにobjectBoundingBoxを使用しようとしましたが、結果として得られたものは、個々の放射状のグラデーションが各セグメントに塗りつぶされていました（各セグメントの円）。コンテナの高さ/幅を変更すると、放射グラデーションの外側の円が押し出され、円弧の色が実際に勾配効果を失います。このため、高さ/幅が変更されたときにラジアルグラデーションの形状を維持する方法を見つけようとしています。あなたは（CX、CY）0,0にコンテナの起源をグラデーションの中心を設定し、使用コンテナスペースを伝えた

var w = 1000, h = 1000 
r = Math.min(w, h) /4 ; 

var svg = d3.select("body").append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .append("g") 
    .attr("transform", "translate(" +Math.min(w,h)/2 + "," +Math.min(w,h) /2  + ")"); 

var radialGradient = d3.select("svg").append("defs") 
    .append("radialGradient") 
    .attr("id", "radial-gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", "60%") 
    .attr("spreadMethod", "reflect"); 

radialGradient.append("stop") 
    .attr("offset", "15%") 
    .attr("stop-color", "red"); 

radialGradient.append("stop") 
    .attr("offset", "25%") 
    .attr("stop-color", "#fff"); 

radialGradient.append("stop") 
    .attr("offset", "35%") 
    .attr("stop-color", "red"); 

svg.append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", r) 
    .style("fill", "url(#radial-gradient)"); 

Answer 1

：UserSpaceOnUseでの

おかげ は、これは私のコードです。変更するだけで、これを修正するには

：

.attr("gradientUnits", "objectBoundingBox") // your object limits 
    .attr("cx", "50%") 
    .attr("cy", "50%")        // your object center 

・ホープ、このヘルプ