Question

我正在尝试使用d3将高斯模糊应用于svg圈，而在我的SPA与Ember的非主页上。

首先我尝试使用d3代码

didInsertElement: function() {
    var svg = d3.select('#svg');
    var filter = svg
    .append("filter")
      .attr("id", "blur")
    .append("feGaussianBlur")
      .attr('in', 'SourceAlpha')
      .attr("stdDeviation", 3)
      .attr('result', 'blur');

    svg.append('circle')
         .attr('cx', 50)
         .attr('cy', 50)
         .attr('r', 20)
         .style({'fill': 'blue'})
         .attr('class', 'cursor')
         .attr('filter', 'url(#blur)');
}

但这不起作用。然后我尝试了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>

直接插入车把模板。那也行不通。请注意，这一切都在BridgeBuilderView页面上。

然后我在应用程序启动时首先加载的index.hbs页面上重写所有内容。当我这样做时，高斯模糊在两种情况下均有效。我想知道是否有人能够了解为什么会出现这种情况，以及如何让它在我的非根页面上运行。

由于

使用SVG滤镜高斯模糊与单页面应用程序（Ember）

0 个答案: