Question

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

Answer 1

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

注入位置

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

然后使用它来指定url()

的路径

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

现在它按预期工作。

Answer 2

以防万一有人到达这里，而这还不够清楚，这就是我为Safari在url中使用的任何<svg>做的事情：

我在组件中导入位置

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')"

Angular2 SVG过滤网址

2 个答案: