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

【问题标题】：Create rect with blurred stroke in svg using d3.js使用 d3.js 在 svg 中创建具有模糊笔划的矩形
【发布时间】：2018-05-31 14:07:21
【问题描述】：

如何使用 d3.js 在svg 中创建一个带有模糊笔划的rect？

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

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

【问题讨论】：

在笔划上设置高斯模糊滤镜。

标签： javascript d3.js svg markup blurry

【解决方案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>

【讨论】：

但是mine 的实现有什么问题呢？我和你一样做了，但仍然无法看到一个矩形。实际上我在documentation之后所做的是：创建GraphicAlpha的模糊版本，使其10%大于原始元素，然后添加它并将其放在原始元素之上，所以我希望看到阴影每边的位置均等（上边框、右边框、下边框和左边框各占 5%）。
您的 d3 代码无法呈现（即使没有过滤器） - 请先修复该问题
在您的 html 中，您的主要 <div> "id" 属性以 "#" 开头 -- 尝试删除它