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">

	<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>

我需要帮助在悬停时动画这个svg

1 个答案: