Issue with @keyframes in SVG style tag
artekkk opened this issue · comments
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.
This is an upstream svgo issue. You could try with v3.0.0-rc1 which is using the latest 3.2.0 svgo, otherwise this needs to be fixed upstream in svgo.