使用 d3.js 在 svg 中创建具有模糊笔划的矩形

Question

如何使用 d3.js 在 svg 中创建笔画模糊的 rect？

或者至少是普通的 svg 标记。

我找不到这样的示例或问题的解决方案。如果您告诉我它是重复的并提供类似的问题，我会很乐意删除这个问题。但我很确定它不是重复的。

Answer 1

你可能想看看这篇文章"Adding a subtle touch of glow to your d3.js visualizations"

如果您想手动执行此操作，可以使用 feGaussianBlur 滤镜，更多信息在这里：feGaussianBlur

来自 Mozilla 开发人员：

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

使用 d3.js 在 svg 中创建具有模糊笔划的矩形

Create rect with blurred stroke in svg using d3.js

javascript

d3.js

svg

markup

blurry