Giters

svg-sprite / svg-sprite

SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with @keyframes in SVG style tag

artekkk opened this issue · comments

commented

Hi.

I'm using "vite-svg-sprite-wrapper" and having problems with keyframe animations inside SVGs. I suspect the problem is in this module.

It probably has something to do with the nested syntax of the @Keyframes rule. Here's what happens:

src:

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>@keyframes icon-animation-arrow-down { 50% { translate: 0 8% } }</style>
    ...
    <path vector-effect="non-scaling-stroke" d="M32.6098 23.6797L24.125 32.6494L16.125 23.6797" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-stroke); stroke-width: var(--icon-stroke-width); animation: 0.6s both var(--animation-name, icon-animation-arrow-down);"/>
</svg>

result:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 48 48" fill="none" id="xxx" xmlns="http://www.w3.org/2000/svg">
        <style>@keyframes icon-animation-arrow-down { 50% { translate: 0 8% } } }</style>
        ...
        <path vector-effect="non-scaling-stroke" d="M32.6098 23.6797L24.125 32.6494L16.125 23.6797" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-stroke); stroke-width: var(--icon-stroke-width); animation: 0.6s both var(--animation-name, icon-animation-arrow-down);"/>
    </symbol>
</svg>

An additional closing curly bracket is added to the keyframe block.

This gets even worse with more than one animation steps:

src:

<style>
    @keyframes icon-animation-arrow-down {
        0% { translate: 0 }
        50% { translate: 0 8% }
        100% { translate: 0 }
    }
</style>

result:

<style>@keyframes icon-animation-arrow-down {
            0% { translate: 0 }
            50% { translate: 0 8% }
            100% { transla{ translate: 0 8% }
            100% { translate: 0 }
        }
    { translate: 0 }
        }
    
        }</style>

Am I doing something wrong? Hope you can help.