Question

我在Chrome中使用简单的SVG动画时遇到问题。它在台式机上的FF＆Edge上运行良好，但在台式机或Android上的Chrome中无法正常运行。

$('.animate-btn').on('click', function() {
  console.log('clicked');
  $('.service-icon').toggleClass('animate');
});

body {
  background: #000;
}

.animate-btn {
  position: relative;
  z-index: 999;
}

.service-icon {
  position: absolute;
  width: 500px;
}

.service-icon svg {
  opacity: 0.3;
}

.service-icon.animate .circle {
  fill: #F29400!important;
}

.service-icon.animate svg path,
.service-icon.animate svg fill,
.service-icon.animate svg rect,
.service-icon.animate svg polygon,
.service-icon.animate svg circle {
  stroke: #000;
  stroke-width: 20;
  stroke-dasharray: 3000;
  stroke-dataoffset: 3000;
  animation: outline 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes outline {
  0% {
    stroke-dashoffset: 0;
    fill: none;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 3000;
    fill: #fff;
    animation-fill-mode: forwards;
    opacity: 1;
  }
}

<html>

<body>
  <div class="service-icon service-design">
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
    <svg enable-background="new 0 0 241.997 241.997" version="1.1" viewBox="0 0 241.997 241.997" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
	<path d="m87.129 154.87" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3"/>
	<path d="m170.16 155.15c22.971-22.971 22.971-60.346 1e-3 -83.317-22.972-22.97-60.348-22.971-83.317 0-17.854 17.854-22.35 44.879-11.307 67.495l0.726-0.367c-10.882-22.301-6.449-48.949 11.155-66.553 22.654-22.655 59.515-22.654 82.168 0 22.654 22.654 22.654 59.514 2e-3 82.168-17.604 17.604-44.255 22.038-66.557 11.153l-0.366 0.728c22.616 11.042 49.641 6.547 67.495-11.307z" fill="#fff"/>
		<rect transform="matrix(.707 -.7072 .7072 .707 -150.29 79.55)" x="18.231" y="202.86" width="5.24" height="36.567" fill="#fff"/>
		<rect transform="matrix(.7071 -.7071 .7071 .7071 -37.962 190.66)" x="173.38" y="140.34" width="75.573" height="1.626" fill="#fff"/>
		<rect transform="matrix(.7071 -.7071 .7071 .7071 23.892 119.34)" x="155.19" y="-6.957" width="1.626" height="75.574" fill="#fff"/>
		<rect transform="matrix(.7071 -.7071 .7071 .7071 -47.426 57.487)" x="7.893" y="85.18" width="75.573" height="1.624" fill="#fff"/>
	<g fill="#fff">
			<rect transform="matrix(.7068 -.7074 .7074 .7068 -143.88 82.257)" x="26.481" y="176.92" width="1.625" height="75.572"/>
			<rect transform="matrix(.7071 -.7071 .7071 .7071 -134.63 85.992)" x="35.674" y="167.72" width="1.626" height="75.572"/>
			<rect transform="matrix(.7073 -.707 .707 .7073 -125.41 89.764)" x="44.867" y="158.53" width="1.626" height="75.572"/>
			<rect transform="matrix(.7073 -.707 .707 .7073 -116.22 93.573)" x="54.062" y="149.34" width="1.624" height="75.574"/>
	</g>
	<path d="m184.16 169.31c30.733-30.732 30.732-80.739-1e-3 -111.47s-80.74-30.734-111.47 0c-19.207 19.206-21.041 38.35-22.815 56.863-1.62 16.914-3.151 32.902-17.702 47.994l1.149 1.149c14.965-15.525 16.594-32.53 18.171-48.985 1.744-18.229 3.551-37.078 22.347-55.873 30.099-30.1 79.074-30.099 109.17 0s30.101 79.076 1e-3 109.18c-18.795 18.794-37.644 20.601-55.871 22.346-16.456 1.576-33.462 3.206-48.987 18.17l1.149 1.15c15.091-14.552 31.081-16.082 47.991-17.702 18.516-1.775 37.66-3.609 56.867-22.816z" fill="#fff"/>
	<polygon points="129.86 104.67 127.32 105.02 136.66 113.86 137.33 112.14" fill="#fff"/>
		<rect transform="matrix(.707 -.7073 .7073 .707 -51.888 120.3)" x="118.42" y="107.73" width="1.626" height="30.066" fill="#fff"/>
		<rect transform="matrix(.7071 -.7071 .7071 .7071 -82.479 103.11)" x="38.934" y="150.3" width="88.574" height="1.626" fill="#fff"/>
		<rect transform="matrix(.7071 -.7071 .7071 .7071 -85.652 110.77)" x="46.595" y="157.96" width="88.574" height="1.624" fill="#fff"/>
	<polygon points="130.01 133.82 66.654 197.18 67.803 198.33 131.43 134.7 143.5 98.498 107.3 110.56 43.67 174.19 44.819 175.34 108.18 111.98 140.93 101.07" fill="#fff"/>
	<path class="circle" d="m130.72 0.95c-1.267-1.267-3.329-1.267-4.597 1e-3 -1.268 1.267-1.268 3.329 0 4.596s3.329 1.267 4.597 0 1.268-3.329 0-4.597z" fill="#F29400"/>
	<path class="circle" d="m241.04 111.27c-1.267-1.266-3.33-1.267-4.598 0-1.267 1.268-1.267 3.33 1e-3 4.597 1.269 1.269 3.33 1.269 4.597 0 1.268-1.266 1.269-3.329 0-4.597z" fill="#F29400"/>
	<circle class="circle" cx="18.099" cy="113.57" r="3.25" fill="#F29400"/>
	<path class="circle" d="m187.89 164.43c-2.375-2.377-6.24-2.377-8.617-1e-3 -2.376 2.377-2.377 6.243-1e-3 8.619 2.378 2.378 6.242 2.376 8.619 0 2.376-2.377 2.378-6.241-1e-3 -8.618z" fill="#F29400"/>
	<path class="circle" d="m77.57 54.102c-2.376-2.376-6.243-2.376-8.618 0-2.377 2.377-2.377 6.244-1e-3 8.62s6.243 2.376 8.619 0c2.377-2.378 2.377-6.244 0-8.62z" fill="#F29400"/>
	<path class="circle" d="m187.9 54.102c-2.377-2.377-6.242-2.376-8.619 0-2.376 2.376-2.377 6.241 0 8.618 2.376 2.377 6.242 2.376 8.618 0 2.377-2.376 2.377-6.242 1e-3 -8.618z" fill="#F29400"/>
  </svg></div>
  <button class="animate-btn">Animate</button>

</body>
<html>

圆圈应该是橙色的，但是当设置动画时，它们在Chrome中变成白色。

谢谢

Chrome中的SVG路径填充问题

0 个答案: