auto-animate icon indicating copy to clipboard operation
auto-animate copied to clipboard

Typescript error when using on SVG element

Open braebo opened this issue 1 year ago • 2 comments

Auto-animate seems to work great on an SVG element, but typescript freaks out.

Argument of type 'SVGSVGElement' is not assignable to parameter of type 'HTMLElement'.

Would it be possible to add SVG elements to the type definition?

My use-case looks like this (inside a .svelte component):

<svg height="30" width="100%" viewBox="0 0 {length} 30" use:autoAnimate>
    {#each sequence.notes as note}
        <rect
            x={note.ticks + 1}
            y="-4"
            width={note.duration * 50}
            height={7 + note.velocity * 30}
            fill="hsla({100 - Math.round(note.velocity * 100)},30%,50%,1)"
            rx="2"
        />
    {/each}
</svg>

braebo avatar Oct 15 '22 18:10 braebo

Hmm, interesting. Yeah I suppose SVGElement and HTMLElement would both be valid. Worth fixing this I think 👍

justin-schroeder avatar Oct 15 '22 21:10 justin-schroeder

Line 120 might be a problem:

const { offsetWidth, offsetHeight } = root

offsetWidth and offsetHeight were removed from SVGElement years ago... but it still works 🤔

braebo avatar Oct 26 '22 17:10 braebo