ホバー上のボタンの内側にあるSVGに連続したアニメーションを貼り付けるにはどうすればいいですか？

私はcodewarsリンク（div）に取り組んでいます。私は、div内のsvgをホバー上で連続的に回転させたいと思います。結果として得られるホバー効果は滑らかではありません。マウスがマウスの上に乗ると、svgがジャンプします。それが価値があるので、mouseoutイベントはコメントアウトされています。これを最適化する最良の方法は何ですか？ Codepen：https://codepen.io/forTheLoveOfCode/pen/MOvRNb ホバー上のボタンの内側にあるSVGに連続したアニメーションを貼り付けるにはどうすればいいですか？

CSS：

#codewars-butn{ 
    position: absolute; 
    top: 20%; 
    left: 20%; 
    background-color: #B21C15; 
    border: 2px solid; 
    border-radius: 10px; 
} 
body{ 
    background-color: #3F2740; 
} 
.codewars{ 
    display: inline-block; 
    stroke:#000; 
    stroke-dasharray: 1 5; 
}

はHTML：

<body> 
    <div id="codewars-butn"> 
    <svg class="codewars" width="100" height="100"> 
     <defs> 
      <path id="curve" d="M50 50 A 20 20 0 1 0 80 70" stroke-width="10" stroke-linecap="round" fill="none"/> 
     </defs> 
     <use href="#curve"/> 
     <use href="#curve" transform="rotate(60, 50, 50)"/> 
     <use href="#curve" transform="rotate(120, 50, 50)"/> 
     <use href="#curve" transform="rotate(180, 50, 50)"/> 
     <use href="#curve" transform="rotate(240, 50, 50)"/> 
     <use href="#curve" transform="rotate(300, 50, 50)"/> 

     <animateTransform attributeName="transform" 
           attributeType="XML" 
           type="rotate" 
           from="0 0 0" 
           to="360 0 0" 
           dur="5s" 
           begin="mouseover" 
<!--        end="mouseout" --> 
           repeatCount="indefinite"/> 
    </svg> 
    </div> 
</body>

出典

2017-11-15 Katia Punter

ここで、私はSVG変換を削除し、唯一のソリューションCSSを作りました。

#codewars-butn:hover svg{ 
    animation-name: rotate; 
    animation-duration: 1s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
} 

@keyframes rotate { 
    from { transform: rotate(0deg) } 
    to { transform: rotate(360deg) } 
}

https://codepen.io/mnikolaus/pen/VrzJLY

出典

2017-11-15 14:26:00

素晴らしいアイデア@Marioニコラウスが、アニメーション-期間の場合：0.5秒、それはまだ、マウスのホバーとしてジャンプします。あなたの答えをありがとう！ –

私はあなたの_still jumps_の定義を理解しているとは思えません。私はそれがちょうど今それを調整することの問題だと思う。もっと説明できますか？私はcodepenのコードをアニメーションごとに60度だけ回転するように更新しました。 –

あなたの問題は、マウスがSVG「上」であるときに、アニメーションを始めているということです。しかし、何が起きているのかは、SVGが回転するとパスがマウスポインタの下を通過するため、マウスアウトイベントが発生してからパスが過ぎると別のマウスオーバーが発生するということです。

解決策は、<path>要素がマウスイベントを引き起こさないようにすることです。その方法は、あなたのパスに以下を追加することです。

pointer-events="none"

#codewars-butn{ 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 20%; 
 
    background-color: #B21C15; 
 
    border: 2px solid; 
 
    border-radius: 10px; 
 
} 
 
body{ 
 
    background-color: #3F2740; 
 
} 
 
.codewars{ 
 
    display: inline-block; 
 
    stroke:#000; 
 
    stroke-dasharray: 1 5; 
 
}

<div id="codewars-butn"> 
 
    <svg class="codewars" width="100" height="100"> 
 
     <defs> 
 
      <path id="curve" d="M50 50 A 20 20 0 1 0 80 70" stroke-width="10" 
 
       stroke-linecap="round" fill="none" pointer-events="none"/> 
 
     </defs> 
 
     <use href="#curve"/> 
 
     <use href="#curve" transform="rotate(60, 50, 50)"/> 
 
     <use href="#curve" transform="rotate(120, 50, 50)"/> 
 
     <use href="#curve" transform="rotate(180, 50, 50)"/> 
 
     <use href="#curve" transform="rotate(240, 50, 50)"/> 
 
     <use href="#curve" transform="rotate(300, 50, 50)"/> 
 

 
     <animateTransform attributeName="transform" 
 
           attributeType="XML" 
 
           type="rotate" 
 
           from="0 0 0" 
 
           to="360 0 0" 
 
           dur="5s" 
 
           begin="mouseover" 
 
           repeatCount="indefinite"/> 
 
    </svg> 
 
    </div>

出典

2017-11-15 15:13:56

ありがとう、私はそれを試みます！ポインタイベントの大きな説明。 –

カーソルを再び動かすときにジャークを避けるために、 'restart ="を追加することができます.NotActive "https://jsfiddle.net/mwwdwqab/ –

ホバー上のボタンの内側にあるSVGに連続したアニメーションを貼り付けるにはどうすればいいですか？

答えて

関連する問題