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

user_5388264 0
Viewed 115

This Codepen shows a glowing red SVG path.

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>

As soon as I copy the code over into a Svelte component the path disappears.

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

Removing filter: url(#glow); from the path's style attribute makes it reappear, obviously without the glow. So applying the filter somehow makes the path disappear although I can't find anything in the JS and CSS output that hints at the cause.

What am I missing?

svelte svg
1 Answers

Apparently, Svelte is case-sensitive when parsing SVG tags. When using proper cases, the example works in the Svelte REPL too (i.e. feMergeNode instead of femergenode etc.) This is a working snippet.

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

user_53882640
Related