Angular2 SVG过滤器网址 [英] Angular2 SVG filter url

问题描述

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

I'm using Angular2 + D3 to create a chart.
I'd like to apply an svg filter to the bars in order to create a drop-shadow effect.
While the filter is created and the bars have a filter: url("#dropshadow") style applied, the shadow does not render.
Could this be due to Angulars single page and the url() not finding the filter? What would be the correct way to work around this issue?

推荐答案

我终于知道了.最好的解决方案似乎是通过

I finally figured it out. The best solution seems to be to inject the Location via

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

，然后使用它指定url()

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

现在它可以正常工作了.

Now it works as expected.

这篇关于Angular2 SVG过滤器网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！