为什么这个 SVG 滤镜在 Svelte 中使用时会使路径消失？

Question

此 Codepen 显示了一条发光的红色 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>

只要我将代码复制到 Svelte 组件中，路径就会消失。

https://svelte.dev/repl/ce9e90880ff34f2db940b33d19473ec2?version=3.37.0

从路径的样式属性中删除 filter: url(#glow); 使其重新出现，显然没有发光。因此，尽管我在 JS 和 CSS 输出中找不到任何提示原因的内容，但以某种方式应用过滤器会使路径消失。

我错过了什么？

Answer 1

显然，Svelte 在解析 SVG 标签时区分大小写。当使用适当的案例时，该示例也适用于 Svelte REPL（即 feMergeNode 而不是 femergenode 等）。这是一个有效的片段。

<svg height="300" width="824">
<g class="svgWrapper" transform="translate(412,150)">
  <defs>
    <filter id="glow">
      <feGaussianBlur class="blur" result="coloredBlur" stddeviation="4" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </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)"
  />
</g>
</svg>

为什么这个 SVG 滤镜在 Svelte 中使用时会使路径消失？

Why does this SVG filter make paths disappear when used in Svelte?

svg

svelte