html - animateTransform 不适用于变换比例

Question

我正在尝试让#moon svg 组遵循一条路径并应用定时转换。在这种情况下，我似乎无法让 animateTransform 工作。

当我设置 animateMotion 时，它会导致 <g>移出框架。我用属性 transform="translate(-53,-130)"调整它，这很好。当我添加 addTransform 时，<g>掉落并超出框架，我无法调整平移以将其带回框架。那么，是否有保留 <g> 的技巧？到位还是使用 addTransform 将其重新调整回框架？

<svg width="100%" height="100%" viewBox="0 0 570 594" preserveAspectRatio="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="padding: 0 10px 0 18px;fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
    <path id="orbit" d="M146.719,183.637l-18.408,-7.796l-13.233,-6.252l-12.327,-6.302l-18.44,-9.379l-12.42,-11.695l-16.36,-10.421l-15.546,-10.511l-12.326,-12.281l-14.415,-14.728l-8.426,-16.45l-4.168,-14.276l2.084,-14.272l6.297,-11.239l8.019,-10.103l12.013,-6.302l16.682,-8.426l16.356,-4.169l22.804,-4.217l27.474,-4.168l22.03,0l21.75,1.042l24.881,1.042l20.524,1.042l26.875,3.126l27.917,5.211l41.477,9.293l37.047,10.702l41.159,12.782l35.33,14.012l19.808,8.426l25.874,12.554l18.86,11.423l18.578,11.556l18.815,14.105l17.777,16.951l12.233,16.718l8.345,17.187l1.091,27.64l-7.434,8.207l-11.194,10.466l-15.595,10.559l-24.221,7.844l-22.609,5.211l-30.925,3.265l-43.658,0l-32.546,-2.085" style="fill:none;stroke-width:0px;stroke:#ff6060;"/>
    <g id="moon" transform="translate(-53, -130)">
        <path d="M77.39,295.34c0,-10.683 -8.658,-19.343 -19.342,-19.343c-10.683,0 -19.344,8.66 -19.344,19.343c0,10.683 8.661,19.343 19.344,19.343c10.684,0 19.342,-8.66 19.342,-19.343" style="fill:#fff;fill-rule:nonzero;"/>
        <path d="M61.54,304.476c0,-2.967 -2.404,-5.373 -5.371,-5.373c-2.969,0 -5.373,2.406 -5.373,5.373c0,2.967 2.404,5.373 5.373,5.373c2.967,0 5.371,-2.406 5.371,-5.373" style="fill:#878787;fill-opacity:0.199997;fill-rule:nonzero;"/>

        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#orbit" />
        </animateMotion>
        <animateTransform attributeName="transform"
                type="scale"
                keyTimes="0;0.2;0.8;1" values="1.5;4;4;1.5"
                dur="6s" additive="replace" fill="freeze"
                repeatCount="indefinite"/>
    </g>
</svg>

Answer 1

animateTransform 通常用动画值替换当前变换，additive 属性对此进行控制。

如果您设置 additive="sum"，则动画将应用在现有变换之上而不是替换它。