为什么在Svelte组件中使用SVG辉光滤镜会导致路径元素消失

• 核心原因是Svelte的SVG模板编译规则和普通网页的浏览器解析逻辑存在差异：
  • 原代码中所有滤镜相关的标签、属性都采用了全小写写法，不符合SVG W3C规范的驼峰命名要求：标准命名应为feGaussianBlur、feMerge、feMergeNode、stdDeviation，而非代码里的fegaussianblur、femerge、femergenode、stddeviation
  • 普通浏览器的HTML解析器对SVG内容存在容错机制，全小写的写法会被自动纠正识别，正常生成滤镜节点；但Svelte 3.x版本在编译阶段会对SVG命名空间下的元素做严格校验，遇到不符合命名规范的标签，会直接将其判定为自定义未知元素，不会将其挂载到SVG的合法节点树中
  • 这种解析差异最终导致id为glow的辉光滤镜压根没有被成功创建，路径上引用的filter: url(#glow)指向了一个不存在的无效资源；浏览器遇到SVG元素引用无效滤镜时，会直接隐藏该元素，最终表现为带滤镜的路径直接消失

• 基础修正：将所有滤镜相关的标签、属性按照SVG规范调整为标准驼峰格式，修正后的核心代码片段参考：

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

• 优化建议：如果多个Svelte组件都需要用到辉光类滤镜，建议给滤镜id添加组件级唯一后缀（比如结合随机字符串生成不重复id），避免多组件复用同一个id引发的滤镜引用错位
• 注意事项：Svelte不会像浏览器DOM解析器那样自动纠正SVG元素的大小写，书写所有SVG内置元素（尤其是滤镜、动画类特殊标签）时，必须严格遵循W3C的XML大小写敏感规则，不要依赖浏览器的容错解析能力。

内容的提问来源于stack exchange，提问作者303