Angular2 SVG过滤器网址答案

【问题标题】：Angular2 SVG filter urlAngular2 SVG过滤器网址
【发布时间】：2017-01-13 17:21:45
【问题描述】：

我正在使用 Angular2 + D3 创建图表。
我想对条形应用 svg 过滤器以创建阴影效果。
在创建过滤器并且条形应用了filter: url("#dropshadow") 样式时，阴影不会呈现。
这可能是由于 Angulars 单页和 url() 没有找到过滤器吗？解决此问题的正确方法是什么？

【问题讨论】：

请出示代码。您是否在 Angular2 应用程序之外尝试过相同的操作？ <base href="..."> 和 APP_BASE_HREF 是如何设置的？
<head><base href="/"> ... </head> 在index.html。我没有设置 APP_BASE_HREF，是吗？它确实在角度之外工作......代码有点太大，现在无法发布，如果我找不到解决方案，我将创建一个更小的示例来重现问题......
我看到它提到<base href="..."> 可以破坏SVG。尝试设置（提供）APP_BASE_HREF，而不是配置路由器。如果是用于路由器，那么您可以提供APP_BASE_HREF 并省略基本标签。

标签： d3.js svg angular

【解决方案1】：

我终于明白了。最好的解决方案似乎是通过

注入位置

import { Location } from '@angular/common';
...
constructor(private location: Location)

然后用它来指定url()的路径

.style('filter', 'url(' + this.location.path() + '#drop-shadow)')

现在它可以按预期工作了。

【讨论】：

在我最终将问题追溯到 ng2 路由器和 SVG 过滤器冲突之前，我花了几个小时试图解决这个问题。最终找到了这个，现在它完美地工作了。非常感谢！

【解决方案2】：

如果有人到达这里并且这还不够清楚，这里是我对 Safari 中 <svg> 中使用的任何 url 所做的：

在我的组件中我导入位置

import { Location } from '@angular/common';

...
  constructor(private location: Location) {
  }

  url(id: string) {
    return `url(${this.location.path()}${id}`;
  }

}

然后在内联<svg>标签中使用如下

[attr.filter]="url('#filter-11')"

[attr.clip-path]="url('#clip')"

【讨论】：