私はホバリングでこのsvgをアニメーション化するのに助けが必要です

Question

ホバリングでこのSVGをアニメーション化する際に問題があります。

私は、しかし、私はあなたがアイコンにカーソルを合わせると、それはそう、全体のアイコンがでアニメーション化したい、サークルがアニメーション化するために得ることができます。

ペンはここにアニメーションを置く http://codepen.io/dterr009/pen/VmyWBW

.st0 { 
    fill: none; 
    stroke: #e18a26; 
    stroke-width: 3; 
    stroke-miterlimit: 10; 
    stroke-dasharray: 200; 
    stroke-dashoffset: 200; 
    animation: dash 2s ease forwards; 
    animation-play-state: paused; 
} 

.st0:hover { 
    animation-play-state: running; 
} 

Answer 1

ですst0は動作しません。せいぜい、浮遊している特定のst0要素だけがアニメーション化されることになります。

ホバールールとアニメーションを<svg>要素に追加する必要があります。

.st0{ 
 
    fill:none; 
 
    stroke:#e18a26; 
 
    stroke-width:3; 
 
    stroke-miterlimit:10; 
 
} 
 

 
svg { 
 
    stroke-dasharray: 200; 
 
    stroke-dashoffset: 200; 
 
} 
 

 
svg:hover{ 
 
    animation: dash 2s ease forwards; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
.start{ 
 
    fill:none; 
 
    stroke:#007bc3; 
 
    stroke-width:3; 
 
    stroke-linecap:round; 
 
    stroke-linejoin:round; 
 
    stroke-miterlimit:10; 
 
    animation: changecolor .5s ease forwards; 
 
    animation-play-state:paused; 
 
    stroke-dasharray: 0; 
 
    stroke-dashoffset: 0; 
 
} 
 

 
.start:hover{ 
 
    animation-play-state:running; 
 
} 
 

 
@keyframes changecolor { 
 
    from {stroke: #007bc3;} 
 
    to {stroke: #e18a26;} 
 
}

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 

 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> 
 

 
\t <circle class="start" cx="6.9" cy="56.6" r="5.2"/> 
 
\t <circle class="st0" cx="57" cy="56.6" r="5.2"/> 
 
\t <circle class="st0" cx="6.9" cy="7.4" r="5.2"/> 
 
\t <circle class="st0" cx="57" cy="7.4" r="5.2"/> 
 
\t <polyline class="st0" points="12.5,56.6 24.5,56.6 24.5,45.6 \t "/> 
 
\t <polyline class="st0" points="52.5,56.6 40.4,56.6 40.4,45.6 \t "/> 
 
\t <polyline class="st0" points="52.5,7.1 40.4,7.1 40.4,18.1 \t "/> 
 
\t <polyline class="st0" points="12.5,7.1 24.5,7.1 24.5,18.1 \t "/> 
 
\t <rect x="19.4" y="18" class="st0" width="25.9" height="27.6"/> 
 
\t <circle class="st0" cx="6.9" cy="32" r="5.2"/> 
 
\t <circle class="st0" cx="57" cy="32" r="5.2"/> 
 
\t <line class="st0" x1="45.4" y1="32" x2="51.3" y2="32"/> 
 
\t <line class="st0" x1="13" y1="32" x2="18.8" y2="32"/> 
 
\t <circle class="st0" cx="57.1" cy="56.6" r="5.2"/> 
 
\t <circle class="st0" cx="57.1" cy="7.4" r="5.2"/> 
 
\t <polyline class="st0" points="23,22.5 40.4,22.5 40.4,37.2 \t "/> 
 
\t <polyline class="st0" points="24.5,25.8 24.5,40.4 42,40.4 \t "/> 
 
</svg>