Question

我想让#moon svg group遵循路径并应用定时转换。我似乎无法让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”，则动画将应用于现有转换之上而不是替换它。

animateTransform不适用于变换比例

1 个答案: