Html 将鼠标悬停在按钮上时播放SVG动画

所以我得到了这个SVG，它已经在SVG本身中包含了一个动画，现在我的问题是，当我将鼠标悬停在SVG图标上时，如何启动动画，SVG已经为每个移动的部分提供了id

当悬停在svg之外时，我将如何重置它

<?xml version="1.0" encoding="utf-8"?>
<svg id="family" image-rendering="auto" baseProfile="basic" 
version="1.1" x="0px" y="0px" width="550" height="550"

原则上，可以修改SVG文件中的SVG/SMIL动画，使其以您希望的方式工作，而无需求助于CSS动画

不幸的是，这些动画的编写方式极其复杂。在每组的四个附加动画中使用了20个关键帧。由于它们都属于
animateTransform
类型，因此可以将它们作为矩阵乘积写入每组的单个动画中。对每个关键帧进行数学运算会得到一个明显的结果：它都是具有恒定旋转中心的
transform=“rotate（a，cx，cy）”
。而且运动节奏非常均匀，所有这些关键帧都是完全不必要的

    <g id="fatherHead" transform="translate(96.35 53.15)">
        <animateTransform attributeName="transform" additive="replace" type="translate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="176.15,157.45;177.453,158.333;178.648,159.103;179.935,159.911;181.104,160.629;182.261,161.481;183.449,162.199;184.632,162.963;185.711,163.599;186.819,164.308;187.877,165.004;188.916,165.684;189.935,166.338;190.916,166.98;191.921,167.646;192.837,168.282;193.689,168.829;194.633,169.49;195.482,169.967;196.37,170.569;196.37,170.569"
                          fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="rotate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="0,0,0;.78,0,0;1.558,0,0;2.52,0,0;3.291,0,0;4.056,0,0;5.007,0,0;5.765,0,0;6.52,0,0;7.27,0,0;8.019,0,0;8.762,0,0;9.315,0,0;10.051,0,0;10.782,0,0;11.511,0,0;12.048,0,0;12.766,0,0;13.297,0,0;14,0,0;14,0,0"
                          fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="scale" dur="0.833s" keyTimes="0;.25;.3;1"
                          values="1,1;1,1;1,.999;1,.999" fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="translate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="-79.8,-104.3;-79.85,-104.4;-79.8,-104.4;-79.9,-104.4;-79.85,-104.35;-79.8,-104.35;-79.85,-104.4;-79.9,-104.4;-79.9,-104.3;-79.85,-104.35;-79.9,-104.3;-79.9,-104.35;-79.9,-104.3;-79.9,-104.3;-79.9,-104.4;-79.85,-104.4;-79.85,-104.35;-79.85,-104.4;-79.85,-104.35;-79.8,-104.35;-79.8,-104.35"
                          fill="freeze"/>
        <path d="..." />
    </g>

将其作为最上面的元素插入
opacity=“0”
使其不可见但可悬停

现在，动画可以获得属性
begin=“mask.mouseover”
：

现在，当鼠标离开图像时，头部会移回其原始位置

Complete codepen:
原则上，可以修改SVG文件中的SVG/SMIL动画，使其以您希望的方式工作，而无需求助于CSS动画

不幸的是，这些动画的编写方式极其复杂。在每组的四个附加动画中使用了20个关键帧。由于它们都属于
animateTransform
类型，因此可以将它们作为矩阵乘积写入每组的单个动画中。对每个关键帧进行数学运算会得到一个明显的结果：它都是具有恒定旋转中心的
transform=“rotate（a，cx，cy）”
。而且运动节奏非常均匀，所有这些关键帧都是完全不必要的

    <g id="fatherHead" transform="translate(96.35 53.15)">
        <animateTransform attributeName="transform" additive="replace" type="translate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="176.15,157.45;177.453,158.333;178.648,159.103;179.935,159.911;181.104,160.629;182.261,161.481;183.449,162.199;184.632,162.963;185.711,163.599;186.819,164.308;187.877,165.004;188.916,165.684;189.935,166.338;190.916,166.98;191.921,167.646;192.837,168.282;193.689,168.829;194.633,169.49;195.482,169.967;196.37,170.569;196.37,170.569"
                          fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="rotate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="0,0,0;.78,0,0;1.558,0,0;2.52,0,0;3.291,0,0;4.056,0,0;5.007,0,0;5.765,0,0;6.52,0,0;7.27,0,0;8.019,0,0;8.762,0,0;9.315,0,0;10.051,0,0;10.782,0,0;11.511,0,0;12.048,0,0;12.766,0,0;13.297,0,0;14,0,0;14,0,0"
                          fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="scale" dur="0.833s" keyTimes="0;.25;.3;1"
                          values="1,1;1,1;1,.999;1,.999" fill="freeze"/>
        <animateTransform attributeName="transform" additive="sum" type="translate" dur="0.833s"
                          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1"
                          values="-79.8,-104.3;-79.85,-104.4;-79.8,-104.4;-79.9,-104.4;-79.85,-104.35;-79.8,-104.35;-79.85,-104.4;-79.9,-104.4;-79.9,-104.3;-79.85,-104.35;-79.9,-104.3;-79.9,-104.35;-79.9,-104.3;-79.9,-104.3;-79.9,-104.4;-79.85,-104.4;-79.85,-104.35;-79.85,-104.4;-79.85,-104.35;-79.8,-104.35;-79.8,-104.35"
                          fill="freeze"/>
        <path d="..." />
    </g>

将其作为最上面的元素插入
opacity=“0”
使其不可见但可悬停

现在，动画可以获得属性
begin=“mask.mouseover”
：

现在，当鼠标离开图像时，头部会移回其原始位置

完成代码笔：
您尝试过什么？请创建一个。我添加了codepen项目。您可能需要内联SVG文件，并使用CSS转换来制作动画。这样你可以对鼠标悬停做出反应。你尝试过什么？请创建一个。我添加了codepen项目。您可能需要内联SVG文件，并使用CSS转换来制作动画。这样你可以对鼠标悬停做出反应。哇，非常感谢，我还有3个svg动画，但是有了这些信息，我可以做很多事情。我甚至不知道鼠标掩码部分，所以这真的很有帮助。所以我现在去把svg本身改成了您提供给我的，当我悬停在它上面时，svg就会工作。但一旦我试着把它放在一个按钮上，然后在上面悬停，它就不工作了，我是不是错过了什么？Codepen链接：标签似乎仍然没有公开SVG内容的阴影DOM。您可以改为使用对象标记：
。请注意，
元素还需要一个属性
viewBox=“0 0 550”
是否不可能为对象标记a href？这样我就可以在svg播放动画时单击整个按钮。我试过几次，不知怎么的。它要么不会播放动画，要么就是不会用橙色高亮显示。我已尝试将href添加到对象标记，但它没有拾取它。
没有href属性。这里有一个概念上的问题：SVG需要能够接收事件，但如果能够接收，则父文档不能让它们避免“服务于两个主文档”。我能想到的最好的方法是在svg中用
包装mask rect。哇，非常感谢，我还有3个svg动画，但是有了这些信息，我可以用它做很多事情。我甚至不知道鼠标掩码部分，所以这真的很有帮助。所以我现在去把svg本身改成了您提供给我的，当我悬停在它上面时，svg就会工作。但一旦我试着把它放在一个按钮上，然后在上面悬停，它就不工作了，我是不是错过了什么？Codepen链接：标签似乎仍然没有公开SVG内容的阴影DOM。您可以改为使用对象标记：
。请注意，
元素还需要一个属性
viewBox=“0 0 550”
是否不可能为对象标记a href？这样我就可以在svg播放动画时单击整个按钮。我试过几次，不知怎么的。它要么不会播放动画，要么就是不会用橙色高亮显示。我已尝试将href添加到对象标记，但它没有拾取它。
没有href属性。这里有一个概念上的问题：SVG需要能够接收事件，但如果能够接收，则父文档不能让它们避免“服务于两个主文档”。我能想到的最好方法是在svg中用

<rect id="mask" x="0px" y="0px" width="550" height="550" opacity="0"/>

    <g id="fatherHead" transform="translate(96.35 53.15)">
        <animateTransform attributeName="transform" additive="sum"
                          type="rotate" dur="0.833s" begin="mask.mouseover"
                          from="0,36.691,193.224" to="14,36.691,193.224"
                          fill="freeze"/>
        <path d="..." />
    </g>

    <g id="fatherHead" transform="translate(96.35 53.15)">
      <g>
        <animateTransform attributeName="transform" additive="replace"
                          type="rotate" dur="0.833s" begin="bg.mouseover"
                          from="0,36.691,193.224" to="14,36.691,193.224"
                          fill="freeze"/>
        <animateTransform attributeName="transform" additive="replace"
                          type="rotate" dur="0.1s" begin="bg.mouseout"
                          from="14,36.691,193.224" to="0,36.691,193.224"
                          fill="freeze"/>
        <path d="..." />
      </g>
    </g>