Question

我有以下SVG代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%"  height="500"  preserveAspectRatio="none">

    <svg x="10">
        <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#A2B2B1" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z"
              onmouseover="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"
              onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 0;"/>

        <animateMotion
            path="M14.088,6.647c5.426,0,13.935,0.083,16.278,4.281
c2.343,4.199,8.151,8.273,2.726,12.678c-5.426,4.405-2.753-6.984-10.337-8.479c-7.584-1.496-5.103,5.973-10.528,5.973
S0.557,10.939,6.293,6.647C10.917,3.188,8.663,6.647,14.088,6.647z"
            begin="0s" dur="5s" repeatCount="indefinite"
            />
        </g>
    </svg>

    <svg x="200">
        <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#D8D3DE" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z"
              onmouseover="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"
              onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 0;"/>
        <animateMotion
            path="M38.69,22.497c-7.039,3.198-18.123,8.114-23.417,4.53
C9.979,23.443,0.254,22.048,4.927,13.642c4.673-8.406,7.322,6.636,17.965,3.935S26.304,7.508,33.343,4.311
s20.598,5.138,15.461,13.592C44.664,24.718,45.729,19.3,38.69,22.497z"
            begin="0s" dur="5s" repeatCount="indefinite"
            />
        </g>
    </svg>


</svg>

是否可以在鼠标悬停时暂停animateMotion，然后在鼠标移出时重新启动它。

如果你希望看到它正常运行，请点击此处 - http://cdpn.io/cIfCv

Answer 1

可以在svg中暂停和取消暂停所有声明性动画，如下所示：

<svg id="root" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="500" preserveAspectRatio="none">
    <svg x="10">
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#A2B2B1" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
    c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
    c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z" stroke-width="1" stroke="none" onmouseover="pause(); this.style.stroke='#000000';" onmouseout="unpause(); this.style.stroke='none';" />
            <animateMotion path="M14.088,6.647c5.426,0,13.935,0.083,16.278,4.281
    c2.343,4.199,8.151,8.273,2.726,12.678c-5.426,4.405-2.753-6.984-10.337-8.479c-7.584-1.496-5.103,5.973-10.528,5.973
    S0.557,10.939,6.293,6.647C10.917,3.188,8.663,6.647,14.088,6.647z" begin="0s" dur="5s" repeatCount="indefinite" />
        </g>
    </svg>
    <svg x="200">
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#D8D3DE" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
    c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
    c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z" stroke-width="1" onmouseover="pause(); this.style.stroke = '#000000';" onmouseout="unpause(); this.style.stroke = 'none';" />
            <animateMotion path="M38.69,22.497c-7.039,3.198-18.123,8.114-23.417,4.53
    C9.979,23.443,0.254,22.048,4.927,13.642c4.673-8.406,7.322,6.636,17.965,3.935S26.304,7.508,33.343,4.311
    s20.598,5.138,15.461,13.592C44.664,24.718,45.729,19.3,38.69,22.497z" begin="0s" dur="5s" repeatCount="indefinite" />
        </g>
    </svg>
    <script>
        var svg = document.getElementById("root");

        function pause() {
            svg.pauseAnimations();
        }

        function unpause() {
            svg.unpauseAnimations();
        }
    </script>
</svg>

请参阅fiddle。

在鼠标悬停时暂停AnimateMotion

1 个答案: