当尝试在SVG中组合属性动画和变换动画时,最终在Linux上的Chromium(78.0.3904.97)和Firefox(70.0.1)中得到两个不同的最终结果:
铬:
Firefox:
以前的行为是我期望的,因为应该同时应用两个动画。半径动画必须放置在要应用其的元素内,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>