在 SVG SMIL 中堆叠动画和动画转换的正确方法？答案

【问题标题】：Correct way of stacking animtate and animateTransform in SVG SMIL?在 SVG SMIL 中堆叠动画和动画转换的正确方法？
【发布时间】：2019-11-17 21:04:57
【问题描述】：

当尝试在 SVG 中组合属性动画和转换动画时，我最终在 Chromium (78.0.3904.97) 和 Firefox (70.0.1) 中得到两个不同的最终结果，都在 Linux 上：

铬：

火狐：

前一种行为是我所期望的，因为这两个动画都应该被应用。半径动画必须放在应用它的元素内，而 animateTransform 元素必须放在任何元素内。此外，如果移除变换动画，Firefox 会应用半径动画。

为什么我没有在浏览器中获得预期的行为？这个级别的 SMIL 应该是双方都支持的。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="480" height="480" viewBox="0 0 480 480" >
    <circle cx="200" cy="200" r="150" stroke="black" fill="none"/>
    <g>
        <circle cx="200" cy="200" r="150" stroke="red" fill="none">
            <animate
                attributeName="r"
                attributeType="XML"
                values="150;200"
                begin="0s"
                dur="2s"
                fill="freeze"
                repeatCount="1"/>
        </circle>
        <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            values="0 0;40 30"
            begin="0s"
            dur="2s"
            fill="freeze"
            repeatCount="1"/>
    </g>
</svg>

【问题讨论】：

最近发现的Firefox regression

标签： svg cross-browser svg-animate smil

【解决方案1】：

解决了。

这是一种有效的动画堆叠方式，Chromium 渲染是正确的。

Firefox 中的不完整渲染是由于 v70 分支上的回归：https://bugzilla.mozilla.org/show_bug.cgi?id=1592546

【讨论】：