代码之家 › 专栏 › 技术社区 › manymanymore

使用d3.js在svg中创建带有模糊笔划的rect

blurry markup svg d3.js javascript

1

manymanymore · 技术社区 · 6 年前

我怎么能创造一个 rect 模糊的笔划 svg 使用d3.js?

或者至少是普通人 静止无功发生器 加价。

我找不到这样的例子或解决问题的办法。如果你告诉我这是一个副本,并提供一个类似的问题,我将很乐意删除这一个。但我很确定这不是复制品。

1 回复 | 直到 6 年前

1

2

Martin 6 年前

你可能想看看这篇文章 "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>