在SVG SMIL中堆叠animtate和animateTransform的正确方法?

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

铬:

在SVG SMIL中堆叠animtate和animateTransform的正确方法?

Firefox:

在SVG SMIL中堆叠animtate和animateTransform的正确方法?

以前的行为是我期望的,因为应该同时应用两个动画。半径动画必须放置在要应用其的元素内,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>
zwj1590971 回答:在SVG SMIL中堆叠animtate和animateTransform的正确方法?

已解决。

这是一种堆叠动画的有效方法,而Chromium渲染是正确的方法。

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

本文链接:https://www.f2er.com/3089062.html

大家都在问