SVG arg 淡出/渐变效果

Question

我正在尝试使用 d3 创建甜甜圈可视化，每个弧具有淡出/渐变效果，如下所示：

我尝试添加“filter: drop-shadow(0 0 10px color)”，但它没有给我这种效果，而且它在两侧传播。

所以我改用两个馅饼

外层纯色
内部（希望）有淡出效果

我知道在渐变中我可以制作实体，然后淡出，但由于我没有明确的成功之路，所以我分成了两个馅饼

我尝试在第二个饼上同时使用 LinearGradient 和 RadialGradient ，这似乎是朝着好的方向迈出的一步，但渐变效果会随着弧角的不同而变化：

为了简单起见，目前我只为一种颜色创建了一个渐变过滤器，因为我不确定这是否是我问题的解决方案......

我添加了一个片段来帮助帮助者:)

const colors = ['red','green','purple','blue','orange','teal']
const data = [10,12,33,112,22,4];
const pie = d3.pie().padAngle(0.03);
const arcs = pie(data);

const svg = d3.select('body')
  .append('svg');
 
const svgDefs = svg.append('defs');

const mainGradient = svgDefs.append('radialGradient')
                .attr('id', 'mainGradient');

            mainGradient.append('stop')
                .attr('stop-color', 'red')
                .attr('offset', '10%');

            mainGradient.append('stop')
                .attr('stop-color', 'pink')
                .attr('offset', '90%');



d3.select('body')
  .style('position', 'relative')
  .append('svg')
  .style('position', 'absolute')
  .style('z-index', 10)
  .attr('width', 600)
  .attr('height', 600)
  .append("g")
  .attr("transform", "translate(100,100)")
  .selectAll('path')
  .data(arcs)
  .enter()
  .append('path')
  .attr('d', (a,b,c) => d3.arc()({...a, innerRadius: 96, outerRadius: 100}))
  .style('fill', (d, index) => colors[index])

 svg.style('position', 'absolute')
    .attr('width', 600)
    .attr('height', 600)
  .append("g")
    .attr("transform", "translate(100,100)")
    .selectAll('path')
    .data(arcs)
    .enter()
    .append('path')
      .transition()
      .attr('d', (a,b,c) => d3.arc()({...a, innerRadius: 0, outerRadius: 96}))
      .style('fill', 'url(#mainGradient)')

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.min.js"></script>
<body>
</body>
</html>

Answer 1

径向渐变是正确的解决方案，但您可能需要为每个弧定义不同的渐变。

svg {
  height: 180px;
}

<svg viewBox="-6 -6 12 12">
  <defs>
    <radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="5" id="gradient-0">
      <stop offset="0.6" style="stop-color: #ff634700;"/>
      <stop offset="0.9" style="stop-color: #ff63472f;"/>
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="5" id="gradient-1">
      <stop offset="0.6" style="stop-color: #1c9cd900;"/>
      <stop offset="0.9" style="stop-color: #1c9cd92f;"/>
    </radialGradient>
  </defs>
  <path stroke="#ff6347" fill="none" d="M 0 -5 A 5 5 0 0 1 5 0"/>
  <path stroke-width="0" fill="url('#gradient-0')" d="M 0 -5 A 5 5 0 0 1 5 0 L 0 0 Z"/>
  <path stroke="#1c9cd9" fill="none" d="M 0 5 A 5 5 0 0 1 -5 0"/>
  <path stroke-width="0" fill="url('#gradient-1')" d="M 0 5 A 5 5 0 0 1 -5 0 L 0 0 Z"/>
</svg>

SVG arg 淡出/渐变效果

问题描述投票：0回答：1

1个回答

最新问题

SVG arg 淡出/渐变效果

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1