在 SVG 悬停时触发 SVG 动画答案

【问题标题】：Trigger an SVG animation on SVG hover在 SVG 悬停时触发 SVG 动画
【发布时间】：2018-10-04 22:49:16
【问题描述】：

我有一个由 SVG 制成的徽标。这个标志由几条路径组成，其中两条有不同时间的动画。当 SVG 悬停时如何触发它们的动画？我的意思是，当整个 SVG 悬停时，我需要同时运行这两个动画。

这是我目前所拥有的 CodePen： https://codepen.io/anon/pen/WbByYE.

这是完整的代码：

svg {
  width: 160px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <g>
    	<path id="shape1" fill="#f42b38" d="M77.6,67.9v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.8,2.1c1.2,0.9,3.1,0.7,4-0.6c4.7-6.3,7.2-13.8,7.2-21.5
    		s-2.5-15.2-7.2-21.5c-0.9-1.2-2.7-1.5-4-0.6L78.8,30c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.5,4.7,5.3,10.3,5.3,16
    		s-1.9,11.3-5.3,16C77.9,66.7,77.6,67.3,77.6,67.9z	">
        
    <animateTransform  
                      type="rotate" 
                      fill="remove" 
                      restart="always" 
                      to="360 57 50" 
                      from="0 57 50" 
                      dur="0.7s" 
                      begin="0.15s" 
                      calcMode="spline" 
                      additive="replace"
                      accumulate="none" 
                      attributeName="transform" 
                      attributeType="xml" 
                      keySplines="0.42 0 0.58 1" 
                      rotate="10; 100" 
                      repeatCount="1" 
                      keyTimes="0; 1">
    			</animateTransform>
        
      </path>
    	<path id="shape2" fill="#f42b38" d="M65.9,59.4v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.3,1.6c1.2,0.9,3,0.7,4-0.6
    		c5.3-7.1,5.3-18.1,0-25.2c-0.9-1.2-2.7-1.5-4-0.6L67,38.5c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.2,4.2,3.2,10.8,0,15
    		C66.1,58.1,65.9,58.7,65.9,59.4z	">
    <animateTransform  
                      type="rotate" 
                      fill="remove" 
                      restart="always" 
                      to="360 57 50" 
                      from="0 57 50" 
                      dur="0.85s" 
                      calcMode="spline" 
                      additive="replace" 
                      accumulate="none" 
                      attributeName="transform" 
                      attributeType="xml" 
                      keySplines="0 0 0.58 1" 
                      rotate="10; 100" 
                      repeatCount="1" 
                      keyTimes="0; 1">
    			</animateTransform>
    	</path>
    	<path fill="#f42b38" d="M90.7,78.6c-1.2-1.2-3.1-1.2-4.3,0c-7.6,7.5-17.6,11.7-28.3,11.7C36,90.3,18,72.3,18,50.2
    		s18-40.1,40.1-40.1c10.6,0,20.7,4.1,28.3,11.7c1.2,1.1,3.1,1.1,4.3,0l2.7-2.7c1.1-1.1,1.1-3.2,0-4.3C83.9,5.3,71.5,0.1,58.2,0.1
    		c-27.6,0-50,22.4-50,50s22.4,50,50,50c13.3,0,25.8-5.1,35.3-14.6c1.1-1.1,1.1-3.2,0-4.3L90.7,78.6z"/>
    	<path fill="#f42b38" d="M53.2,50.1c0,2.6,2.2,4.7,4.7,4.7c2.6,0,4.7-2.2,4.7-4.7s-2.2-4.7-4.8-4.7C55.2,45.4,53.2,47.5,53.2,50.1z"
    		/>
      </g>
    </svg>

【问题讨论】：

标签： animation svg

【解决方案1】：

现有的答案似乎比它需要的要困难一些。我发现 svg 中的动画标签可以有 begin="mouseover"

<animate
  attributename=""
  from=""
  to=""
  begin="mouseover"
  dur=""
/>

这会在 svg 元素悬停时设置动画。还有很多我不知道的其他事件类型，您可以在这里找到。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin

【讨论】：

【解决方案2】：

首先将begin 属性更改为indefinite，这样动画就不会立即运行。然后在需要时使用 mouseover 事件触发动画。

例如（假设trans1 和trans2 是分配给两个动画元素的ID）：

onmouseover="document.getElementById('trans2').beginElement();setTimeout('document.getElementById(\'trans1\').beginElement()',150);"

一个小问题是鼠标悬停事件将针对 SVG 对象的每个单独元素触发，这可能是您不希望的。您可以通过在整个绘图上放置一个透明矩形来捕获所有鼠标事件来解决此问题。

请参阅下面的 sn-p 以获取工作示例。

<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" width="100" height="100" onmouseover="document.getElementById('trans2').beginElement();setTimeout('document.getElementById(\'trans1\').beginElement()',150);">
<g>
  <path id="shape1" fill="#f42b38" d="M77.6,67.9v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.8,2.1c1.2,0.9,3.1,0.7,4-0.6c4.7-6.3,7.2-13.8,7.2-21.5
        s-2.5-15.2-7.2-21.5c-0.9-1.2-2.7-1.5-4-0.6L78.8,30c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.5,4.7,5.3,10.3,5.3,16
        s-1.9,11.3-5.3,16C77.9,66.7,77.6,67.3,77.6,67.9z    ">

<animateTransform id="trans1"
                  type="rotate" 
                  fill="remove" 
                  restart="always" 
                  to="360 57 50" 
                  from="0 57 50" 
                  dur="0.7s" 
                  begin="indefinite" 
                  calcMode="spline" 
                  additive="replace"
                  accumulate="none" 
                  attributeName="transform" 
                  attributeType="xml" 
                  keySplines="0.42 0 0.58 1" 
                  rotate="10; 100" 
                  repeatCount="1" 
                  keyTimes="0; 1">
            </animateTransform>

  </path>
    <path id="shape2" fill="#f42b38" d="M65.9,59.4v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.3,1.6c1.2,0.9,3,0.7,4-0.6
        c5.3-7.1,5.3-18.1,0-25.2c-0.9-1.2-2.7-1.5-4-0.6L67,38.5c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.2,4.2,3.2,10.8,0,15
        C66.1,58.1,65.9,58.7,65.9,59.4z ">
<animateTransform id="trans2"
                  type="rotate" 
                  fill="remove" 
                  restart="always" 
                  to="360 57 50" 
                  from="0 57 50" 
                  dur="0.85s" 
                  begin="indefinite"
                  calcMode="spline" 
                  additive="replace" 
                  accumulate="none" 
                  attributeName="transform" 
                  attributeType="xml" 
                  keySplines="0 0 0.58 1" 
                  rotate="10; 100" 
                  repeatCount="1" 
                  keyTimes="0; 1">
            </animateTransform>
    </path>
    <path fill="#f42b38" d="M90.7,78.6c-1.2-1.2-3.1-1.2-4.3,0c-7.6,7.5-17.6,11.7-28.3,11.7C36,90.3,18,72.3,18,50.2
        s18-40.1,40.1-40.1c10.6,0,20.7,4.1,28.3,11.7c1.2,1.1,3.1,1.1,4.3,0l2.7-2.7c1.1-1.1,1.1-3.2,0-4.3C83.9,5.3,71.5,0.1,58.2,0.1
        c-27.6,0-50,22.4-50,50s22.4,50,50,50c13.3,0,25.8-5.1,35.3-14.6c1.1-1.1,1.1-3.2,0-4.3L90.7,78.6z"/>
    <path fill="#f42b38" d="M53.2,50.1c0,2.6,2.2,4.7,4.7,4.7c2.6,0,4.7-2.2,4.7-4.7s-2.2-4.7-4.8-4.7C55.2,45.4,53.2,47.5,53.2,50.1z"
        />
  <rect width="100" height="100" fill="#fff" opacity="0" />
  </g>
</svg>

【讨论】：