SVG `<animate>`'s `begin` attribute is incorrectly modified
hodossy opened this issue · comments
Description
I have an animated SVG which becomes invalid after putting it in a sprite with svg-sprite.
Reproduction
repro.svg
<svg width="379px" height="134px" viewBox="0 0 379 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="6" cx="110.5" cy="5.5" r="5.5">
<animate begin="2.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
<circle id="5" cx="89.5" cy="5.5" r="5.5">
<animate begin="2s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
<circle id="4" cx="68.5" cy="5.5" r="5.5">
<animate begin="1.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
<circle id="3" cx="47.5" cy="5.5" r="5.5">
<animate begin="1s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
<circle id="2" cx="26.5" cy="5.5" r="5.5">
<animate begin="0.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
<circle id="1" cx="5.5" cy="5.5" r="5.5">
<animate attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite" />
</circle>
</svg>Put it in a sprite with below command:
npx svg-sprite -s repro.svgand the output (note I have added the whitespace manually here for readability):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 379 134" id="repro" xmlns="http://www.w3.org/2000/svg">
<circle cx="110.5" cy="5.5" r="5.5">
<animate begin="a.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
<circle cx="89.5" cy="5.5" r="5.5">
<animate begin="2s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
<circle cx="68.5" cy="5.5" r="5.5">
<animate begin="b.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
<circle cx="47.5" cy="5.5" r="5.5">
<animate begin="1s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
<circle id="aa" cx="26.5" cy="5.5" r="5.5">
<animate begin="0.5s" attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
<circle id="ab" cx="5.5" cy="5.5" r="5.5">
<animate attributeName="fill" calcMode="discrete" values="#6ebe28;#D8D8D8" dur="5s" keyTimes="0;0.15" repeatCount="indefinite"/>
</circle>
</symbol>
</svg>Please note the begin attribute here, 2.5s has been replaced with a.5s and 1.5s has been replaced with b.5s . If I delete the last circle, only 2.5s is wrong, if I remove the last two circles, then everything is fine!
Environment
Windows 10, Node 16, svg-sprite 1.5.3
I've digged a bit. It's svgo's cleanupIDs plugin problem. Current workaround is to provide svgo config
{
name: 'preset-default',
params: {
overrides: {
cleanupIDs: false,
}
}
}```
Thanks for the WA! It was a tedious task to manually correct the timing issue...
