Css 设置此SVG动画时遇到问题
我有一个svg,我正在尝试制作动画。问题有两个方面。当我将鼠标悬停在图标上时,我需要蓝色圆圈变成橙色。此外,我还需要svg在完成后将动画设置回其原始状态 HTML和CSS在这里Css 设置此SVG动画时遇到问题,css,svg,Css,Svg,我有一个svg,我正在尝试制作动画。问题有两个方面。当我将鼠标悬停在图标上时,我需要蓝色圆圈变成橙色。此外,我还需要svg在完成后将动画设置回其原始状态 HTML和CSS在这里 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <div class
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<div class ="new">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<circle class="start" cx="6.9" cy="56.6" r="5.2"/>
<circle class="st0" cx="57" cy="56.6" r="5.2"/>
<circle class="st0" cx="6.9" cy="7.4" r="5.2"/>
<circle class="st0" cx="57" cy="7.4" r="5.2"/>
<polyline class="st0" points="12.5,56.6 24.5,56.6 24.5,45.6 "/>
<polyline class="st0" points="52.5,56.6 40.4,56.6 40.4,45.6 "/>
<polyline class="st0" points="52.5,7.1 40.4,7.1 40.4,18.1 "/>
<polyline class="st0" points="12.5,7.1 24.5,7.1 24.5,18.1 "/>
<rect x="19.4" y="18" class="st0" width="25.9" height="27.6"/>
<circle class="st0" cx="6.9" cy="32" r="5.2"/>
<circle class="st0" cx="57" cy="32" r="5.2"/>
<line class="st0" x1="45.4" y1="32" x2="51.3" y2="32"/>
<line class="st0" x1="13" y1="32" x2="18.8" y2="32"/>
<circle class="st0" cx="57.1" cy="56.6" r="5.2"/>
<circle class="st0" cx="57.1" cy="7.4" r="5.2"/>
<polyline class="st0" points="23,22.5 40.4,22.5 40.4,37.2 "/>
<polyline class="st0" points="24.5,25.8 24.5,40.4 42,40.4 "/>
</svg>
</div>
<style>
.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;
from {stroke: #007bc3;}
to {stroke: #e18a26;}
}
}
.start{
fill:none;
stroke:#007bc3;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
.start:hover{
animation: changecolor .5s ease forwards;
}
@keyframes changecolor {
from {stroke: #007bc3;}
to {stroke: #e18a26;}
}
</style>
.st0{
填充:无;
行程:#e18a26;
笔画宽度:3;
行程限制:10;
}
svg{
行程:200;
行程偏移:200;
}
svg:悬停{
动画:向前冲2秒;
}
@关键帧破折号{
到{
笔划偏移:0;
从{stroke:#007bc3;}
到{stroke:#e18a26;}
}
}
.开始{
填充:无;
行程:#007bc3;
笔画宽度:3;
笔划线头:圆形;
笔划线条连接:圆形;
行程限制:10;
笔划数组:0;
笔划偏移:0;
}
.开始:悬停{
动画:改变颜色。5秒轻松前进;
}
@关键帧改变颜色{
从{stroke:#007bc3;}
到{stroke:#e18a26;}
}