SVG过滤器网址在角度4中不起作用答案

【问题标题】：SVG filter url is not working in angular 4SVG过滤器网址在角度4中不起作用
【发布时间】：2018-07-23 16:07:32
【问题描述】：

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

【问题讨论】：

试试：stackoverflow.com/questions/39345823/angular2-svg-filter-url

标签： html css angular svg

【解决方案1】：

似乎 Angular 添加了 <base href="/dist/"> 之类的标签，而 safari 或 firefox 无法解析 url。要修复它，您应该在当前位置前添加过滤器 id 的 url： filter: url({{window.location.href}}#glow).

【讨论】：