html - SVG 过滤器 url 在 Angular 4 中不起作用

Question

您好，我在 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>

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

Answer 1

似乎 angular 添加了像 <base href="/dist/"> 这样的标签并且 safari 或 firefox 无法解析 url。要修复它，您应该在当前位置前添加过滤器 ID 的网址: filter: url({{window.location.href}}#glow) .