动画转换不起作用答案

【问题标题】：animateTransform not working动画转换不起作用
【发布时间】：2016-03-12 07:48:14
【问题描述】：

我正在尝试使 SVG 组遵循 SVG 路径并转换该组的动画。我正在尝试使用 animateTransform 进行#moon 变换，但似乎没有任何效果。

谁能发现问题？

<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" style="transform: translateY(-130px) translateX(-53px);">
        <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"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>
    </g>
</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

您将 CSS 变换与变换属性的 SMIL 动画混合在一起。尽管 SVG 2 建议它们应该是同一事物，但 SVG 1.1 将它们视为不同的事物。在 SVG 2 规范和 SVG 2 的 UA 实现接近完成之前，最好不要混合这些东西。

我已将 g 元素的变换转换为属性变换，并且动画现在在 Firefox 上似乎对我有所帮助。

<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"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>
    </g>
</svg>

【讨论】：

感谢您的回复，但我似乎无法让 keyTimes 和 values 属性正常工作。这些是否已弃用并被 from 和 to 取代？
你的问题没有 keyTimes 属性，问另一个有这个属性的问题，我会试着看看它有什么问题。不推荐使用 keyTimes 和 values。
stackoverflow.com/questions/35951291/…

【解决方案2】：

简单！

AnimateTransform 标签必须在内

AnimateMotion标签，完全封闭，不跟随。

【讨论】：

animateMotion 有效，但 animateTransform 无效。你能澄清你的答案吗？（我没有投反对票）。
这个答案不正确，animateTransform is 在它正在动画的 <g> 标记内，它不必在其中，因为它可以被赋予一个 xlink： href 属性，然后放在任何地方。
只需将移动到之后，我将发布我的一个示例。
这也不是问题。
Chrome 也比 Firefox 和 Opera 更麻烦。

【解决方案3】：

进动轨道：

<?xml version="1.0"?>
<svg width="940" height="360"  viewBox="0 0 350 350"
 xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Here is a red circle which will be moved along the     motion path. -->
<g>
  <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45            0,1 10,110"
      stroke="lightgrey" stroke-width="2" 
      fill="none" id="theMotionPath"/
  <circle cx="470" cy="180" r="160" fill="paleblue" />     
  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
        <circle cx="" cy="" r="10" fill="red">        
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
  <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 440 190"
                      to="360 440 190"
                      dur="6s"
                      repeatCount="indefinite"/>
       <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
 </circle>
 <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>

</g>                   
</svg>

根据自己的喜好复制、粘贴、编辑。

【讨论】：

在 animateMotion 中具有 animateTransform 无效。

【解决方案4】：

<!DOCTYPE html>
<div width="100%">
<svg style="background:plum" width="240px" height="120px"
 xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink" >

<polygon points="60,30 90,90 30,90">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>
</polygon>
</svg>
</div>

【讨论】：