我有一个由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>
答案 0 :(得分：3)
首先将begin属性更改为indefinite，以便动画不会立即运行。然后使用mouseover事件在需要时触发动画。
例如（假设trans1和trans2是分配给两个动画元素的ID）：
onmouseover="document.getElementById('trans2').beginElement();setTimeout('document.getElementById(\'trans1\').beginElement()',150);"
一个小问题是mouseover事件将触发SVG对象的每个单独元素，这可能是您不想要的。您可以通过在整个图形上放置透明矩形来捕获所有鼠标事件来解决此问题。
请参阅下面的代码段以获取工作示例。
<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>
答案 1 :(得分：0)
现有答案似乎比需要的困难。我发现，svg中的动画标签可以具有begin =“ mouseover”
<animate
attributename=""
from=""
to=""
begin="mouseover"
dur=""
/>
每当将svg元素悬停在上方时，这将使动画运动。您可以在这里找到很多我不知道的其他事件类型。
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin