Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript error when using on SVG element #100

Open
FractalHQ opened this issue Oct 15, 2022 · 2 comments
Open

Typescript error when using on SVG element #100

FractalHQ opened this issue Oct 15, 2022 · 2 comments

Comments

@FractalHQ
Copy link

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
Copy link
Member

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

@FractalHQ
Copy link
Author

Line 120 might be a problem:

const { offsetWidth, offsetHeight } = root

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants