如何通过更改D3图表中的svg过滤元素在svg圆上应用框阴影效果

Question

我正试图在“D3图表”上制作带有阴影的svg圆圈，就像这个css代码一样：

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

我把这段代码放在svg filter元素中，但结果并不是我想的。谁知道怎么放？

提前致谢。 :)

Answer 1

您可以像这样使用svg圈：

<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);

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