您好,我在 Angular 中使用 SVG 绘制一条线,我正在使用一些滤镜来实现发光效果,但是滤镜 URL 在浏览器中不起作用,并且在我执行“ng serve”时它没有显示任何内容。但相同的 svg 在独立 svg 文件中工作正常。
<svg height="300" width="824">
<g class="svgWrapper" transform="translate(412,150)">
<defs>
<filter id="glow">
<fegaussianblur class="blur" result="coloredBlur" stddeviation="4"></fegaussianblur>
<femerge>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="SourceGraphic"></femergenode>
</femerge>
</filter>
</defs>
<path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="fill-opacity: 0; stroke-width: 2; stroke: red; filter: url(#glow);" transform="translate(-250,-200)"/></path>
</g></svg>
最佳答案
似乎 angular 添加了像 <base href="/dist/">
这样的标签并且 safari 或 firefox 无法解析 url。要修复它,您应该在当前位置前添加过滤器 ID 的网址:
filter: url({{window.location.href}}#glow)
.
关于html - SVG 过滤器 url 在 Angular 4 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48764244/