如何通过更改 D3 图表中的 svg 过滤器元素对 svg 圆应用框阴影效果答案

【问题标题】：How to apply box-shadow effect on svg circle by changing svg filter element in D3 chart如何通过更改 D3 图表中的 svg 过滤器元素对 svg 圆应用框阴影效果
【发布时间】：2019-04-12 15:53:10
【问题描述】：

我正在尝试在“D3 图表”上用 box-shadow 制作 svg 圆圈，就像这个 css 代码：

 box-shadow: 0 0 6px 1px rgba(35, 31, 32, 0.1);
 background-color: #ffffff;

我把这段代码放在 svg 过滤器元素中，但结果不是我想的那样。有人知道怎么放吗？

提前致谢。 :)

【问题讨论】：

SVG drop shadow using css3的可能重复
不清楚你在问什么 - 所以这有可能在没有答案的情况下被关闭。请提供您编写的 SVG 过滤器代码的副本以及您期望的图像结果。

标签： css d3.js svg box-shadow

【解决方案1】：

你可以像这样使用 svg circle：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="rgba(35, 31, 32, 0.1)" stroke-width="6" fill="#ffffff" stroke-opacity="0.1"/>
</svg>

或者：

var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);

var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100).
.attr("r", 50)
.style("fill", "#ffffff")
.style("stroke", "rgba(35, 31, 32, 0.1)")
.style("stroke-width", 6);

这对我有用。希望对你也有帮助:)

【讨论】：