Typescript error when using on SVG element
braebo opened this issue · comments
Braden Wiggins commented
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>
Justin Schroeder commented
Hmm, interesting. Yeah I suppose SVGElement and HTMLElement would both be valid. Worth fixing this I think 👍
Braden Wiggins commented
Line 120 might be a problem:
const { offsetWidth, offsetHeight } = root
offsetWidth
and offsetHeight
were removed from SVGElement
years ago... but it still works 🤔