animateTransform不适用于变换缩放 [英] animateTransform not working for transform scale

问题描述

我想让#moon svg组遵循一个路径并应用定时变换。

当我设置animateMotion时，它会导致< g> 移出框架。我调整与属性transform =翻译（-53，-130）这是罚款。当我添加addTransform时，< g> 下降并退出框架，我不能调整翻译以使其回到框架。那么，有没有办法保持< g> 到位或使用addTransform重新调整回框架？

 < svg width =100％height =100％viewBox =0 0 570 594preserveAspectRatio =trueversion =1.1xmlns = http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkxml：space =preservestyle =padding：0 10px 0 18px; fill-rule：evenodd; clip-rule：evenodd; stroke-miterlimit：10;> 
< path id =orbitd =M146.719,183.6371-18.408，-7.7961-13.233，-6.2521-12.327，-6.3021-18.44，-9.3791-12.42，-11.6951- 16.36，-10.4211-15.546，-10.5111-12.326，-12.2811-14.415，-14.7281-8.426，-16.451-4.168，-14.2761.2.084，-14.272l6.297，-11.23918.019， -10.103l12.013，-6.302l16.682，-8.426l16.356，-4.169l22.804，-4.217l27.474，-4.168l22.03,0121.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.8441-22.609， 5.2111-30.925,3.2651-43.658,01-32.546，-2.085style =fill：none; stroke-width：0px; stroke：＃ff6060;/> 
< g id =moontransform =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.343style =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.373style =fill：＃878787; fill-opacity：0.199997; fill-rule：nonzero;/> 
 
< animateMotion dur =6srepeatCount =indefinite> 
< mpath xlink：href =＃orbit/> 
< / animateMotion> 
< animateTransform attributeName =transform
 type =scale
 keyTimes =0; 0.2; 0.8; 1values =1.5; 4; 4 b dur =6sadditive =replacefill =freeze
 repeatCount =indefinite/> 
< / g> 
< / svg> animateTransform通常用动画值替换当前的变换，而不是使用动画值替换当前的变换。添加属性控制此。 
 
 
 
如果您设置additive =sum，则动画将应用于现有变换之上，而不是替换它。
 
I am trying to get #moon svg group to follow a path and apply timed transforms.  I cannot seem to get animateTransform to work in this situation.

When I set the animateMotion it causes the <g> to move out of frame. I adjust that with the attribute transform="translate(-53,-130)" which is fine. When I add the addTransform, the <g> drops down and out of the frame and I cannot adjust the translate to bring it back to frame. So, is there a trick to keeping the <g> in place or re-adjusting it back into frame with the 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>

解决方案
animateTransform normally replaces the current transform with the animated value, the additive attribute controls this. 

If you set additive="sum" then the animation will be applied on top of the existing transform rather than replacing it.

                        
这篇关于animateTransform不适用于变换缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！