アニメーションSVG、円ストロークホバー

Question

は、アニメーションの矢印模倣するために探している相手：ストロークが円を重ね、ホバーで

http://uve.info/

を、私はIllustratorで作成した形状を有していて、簡単な位置決め、罰金のthats。ストロークをアニメーション化するだけです。

HTML（インラインSVG）：

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve"> 
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/> 
    <path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/> 
</svg> 

経路、既に円です。 uve.infoサイトをエミュレートするために、現在のパスの上にある別のパスが必要です。この全体のアニメーションは、ホバー経由で行われます。これは矢印が痛みを証明する中間のアニメーションのように見えるべきものです。脳卒中を起動するための最良の方法だろう何

？

ありがとうございます。

Answer 1

近代的なブラウザをターゲットにしている場合は、svgアニメーションを使用することをおすすめします。

円の長さが（2 * PI * r）で、長さが同じ長さのstroke-dasharrayを使用してストロークをアニメートできます。ダッシュの長さとオフセットのアニメーション値で遊んで、さまざまなエフェクトを作成します。

これを行う方法の例を次に示します。

.circle:hover { 
 
    /* calculate using: (2 * PI * R) */ 
 
    stroke-dasharray: 227; 
 
    stroke-dashoffset: 0; 
 
    animation-iteration-count: infinite; 
 
    animation-name: rotate; 
 
    animation-duration: 2s; 
 
    animation-direction: alternate; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes rotate { 
 
    to { 
 
    stroke-dashoffset: 227; 
 
    } 
 
}

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve"> 
 
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" /> 
 
    <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" /> 
 
    <circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" /> 
 
</svg>

CSSに animationプロパティを使用して

と@keyframes、あなたは空想もののすべての種類を行うことができます。むしろ単純にしておきたい場合は、下記の例のようにtransitionプロパティを試してみてください。私はsvg transform属性を使用して破線ストロークの開始点を変更していることに注意してください。

.another-circle { 
 
    stroke-dasharray: 227; 
 
    stroke-dashoffset: 227; 
 
    transition: stroke-dashoffset 2s linear; 
 
} 
 
.another-circle:hover { 
 
    stroke-dashoffset: 0; 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve"> 
 
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" /> 
 
    <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" /> 
 
    <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" /> 
 
</svg>