Question

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

picture 1 here 这张照片解释了我真正想要实现的目标。我想用渐变填充弧。我想我需要使用＆＃34; userSpaceOnUse＆＃34;对于渐变单位，因为我将此径向渐变填充到各个段中，如此处所示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

希望这个帮助

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

1 个答案: