为什么这个 SVG 过滤器在 Svelte 中使用时会使路径消失？答案

【问题标题】：Why does this SVG filter make paths disappear when used in Svelte?为什么这个 SVG 过滤器在 Svelte 中使用时会使路径消失？
【发布时间】：2021-08-02 23:17:48
【问题描述】：

这个 Codepen 显示了一个发光的红色 SVG 路径。

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

<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 输出中找不到任何提示原因的内容，但应用过滤器会以某种方式使路径消失。

我错过了什么？

【问题讨论】：

也许你应该尝试使用像 feGaussianBlur 这样的 cammel case 语法而不是 fegaussianblur
哇。这就是诀窍。如果您想获得荣誉，请发布答案，我很乐意接受。
谢谢你，但我不使用 svelte，所以我不愿意回答这个问题，请随意回答你自己的问题。

标签： svg svelte

【解决方案1】：

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

<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>

【讨论】：