带有过滤器的角度 SVG 不渲染答案

【问题标题】：Angular SVG with filter not rendering带有过滤器的角度 SVG 不渲染
【发布时间】：2020-06-06 07:41:06
【问题描述】：

我正在尝试在 Angular 6 应用程序中使用过滤器渲染 SVG，但无法应用过滤器。即使在尝试了几种已经针对类似问题提出的解决方案之后，例如删除 <base href="/"> 或提供过滤器样式的完整 URL。

<svg height="200" width="200">
    <defs>
        <filter id="glow">
            <fegaussianblur 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 d="M0,200 L200,0" stroke="blue" stroke-width="2" />
    <path d="M0,0 L200,200" stroke="blue" stroke-width="2" style="filter: url(#glow);" />
</svg>

这是一个我无法渲染的示例。它包含两行，其中一行应该有发光效果：https://stackblitz.com/edit/angular-awz9dv

如果我将呈现的输出复制/粘贴到静态 HTML 页面，它会呈现良好... 不知道怎么回事，

【问题讨论】：

XML 区分大小写 - feGaussianBlur、feMergeNode、feMerge 等。
@MichaelMullany，我没想到你的评论很重要，但套管实际上解决了我的问题！您能否将您的评论移至实际答案，以便我可以将您的评论标记为该问题的解决方案？

标签： angular url svg filter

【解决方案1】：

在 Michael Mullany 对过滤器的大小写发表评论后，我得到了在 Angular 中工作的 SVG 过滤器，起初这看起来很奇怪，因为在纯 HTML 文件中大小写似乎无关紧要。

但经过一番调查，它似乎与 Angular 的模板机制有关。因为 Angular 保留了它自己的所有可能的 HTML 元素标签和所有 SVG 标签和属性的列表，我猜这与 SVG 过滤标签被分配了错误的命名空间（HTML 命名空间）这一事实有关，因此不再被浏览器。

https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts

希望这可以帮助其他有类似问题的人。

【讨论】：

【解决方案2】：

大小写是一个问题，但要解决 Angular 的名称间距，最好以这种方式提示 Angular XML 受 SVG 名称间距的影响：

<svg height="200" width="200">
    <svg:defs>
        <filter id="glow">
            <svg:feGaussianblur result="coloredBlur" stddeviation="4"></svg:feGaussianblur>
        </svg:filter>
    </svg:defs>
    <svg:path d="M0,200 L200,0" stroke="blue" stroke-width="2" />
</svg>

【讨论】：