Question

您好我在Angular中使用SVG绘制一条线并且我使用了一些滤镜来实现发光效果，但是过滤器网址在浏览器中不起作用，并且当我正在进行“服务”时它没有显示任何内容。但是相同的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>

https://codepen.io/OpherV/pen/dRoQdN

Answer 1

似乎像<base href="/dist/">这样的有角添加标签，而safari或Firefox无法解析网址。要解决此问题，您应该在当前位置之前添加过滤器ID的网址： filter: url({{window.location.href}}#glow)。

SVG过滤器URL在角度4中不起作用

1 个答案: