当 svg 容器的高度/宽度与高度/宽度不同时，为什么 d3 中的径向渐变会发生变化？

Question

我试图了解 d3.js 中的径向渐变是如何工作的。我有一个圆圈，并用“defs”标签中指定的径向渐变填充它。我将径向渐变的“r”坐标设置为 60%，将“cx”和“cy”设置为零。我的理解是径向渐变将始终从 0,0 坐标开始（正好在我的圆形元素的中间），径向渐变的外圆将在我的“r”的 60% 处“停止”。现在，当我仅更改 svg 容器的宽度并保持高度不变时，径向渐变是不一样的。似乎径向渐变的外圈被推开。我不明白为什么会这样。我花了几个小时在网上搜索，但找不到足够的答案。当高度或宽度改变时，是否可以保持径向渐变的形状？

picture 1 here 这张图片解释了我真正想要实现的目标。我想用渐变填充弧。我认为我需要将“userSpaceOnUse”用于渐变单元，因为我正在将这个径向渐变填充到单独的段中，如此处所示picture 2 here。我尝试改用 objectBoundingBox，但结果是在每个段中填充了一个单独的径向渐变。（每个段中的圆）。当我改变容器的高度/宽度时，径向渐变的外圆被推开，因此弧色实际上失去了渐变效果。这就是为什么我试图找到一种在高度/宽度发生变化时保持径向渐变形状的方法。

谢谢 这是我的代码：

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

您已将渐变中心设置为 (cx,cy) 0,0 容器的原点并告诉使用容器空间：userSpaceOnUse。

要更正此问题，只需更改为：

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

希望有帮助