css关键帧动画，转换不适用于SVG

Question

当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充属性可在同一动画中使用。所以动画会被执行。

动画之外的变换是有效的，所以我不知道为什么它在动画中不起作用。

代码只能在Chrome中使用。

我的SVG（摘要）：

$(document).on("click", ".openModal", function () {
     var clickedBy = $(this).data('id');
     $(".modal-body").html(clickedBy)
});

我的CSS代码：

<text x="274.546" y="331.6133" id="Voer" class="st14 st15 clickable">Voer</text>

摆弄重新创建的问题：https://jsfiddle.net/17ecnuLu/

＆＃13;

＆＃13;

@-webkit-keyframes pulse {
  0% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    fill: #ff4a4a;
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes pulse {
  0% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    fill: #ff4a4a;
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.clickable {
  -webkit-animation: pulse 3s infinite ;
          animation: pulse 3s infinite ;
  -webkit-transform: translate(0, -20px);
      -ms-transform: translate(0, -20px);
          transform: translate(0, -20px);
}

＆＃13;

@-webkit-keyframes pulse {
  0% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    fill: #ff4a4a;
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes pulse {
  0% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    fill: #ff4a4a;
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    fill: #000000;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.clickable {
  -webkit-animation: pulse 3s infinite ;
          animation: pulse 3s infinite ;
  -webkit-transform: translate(0, -20px);
      -ms-transform: translate(0, -20px);
          transform: translate(0, -20px);
}

/*SVG MARKUP */

* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
	.st0{opacity:0.3;fill:#CBDB2A;}
	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#306F9C;}
	.st2{fill:none;stroke:#306F9C;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;stroke:#1ABECB;stroke-miterlimit:10;}
	.st4{fill:none;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st5{fill:#1ABECB;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st6{font-family:'HWTArtz';}
	.st7{font-size:5.52px;}
	.st8{font-size:5.4223px;}
	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;}
	.st10{fill:none;stroke:#1ABECB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st11{font-family:'MuseoSansRounded-700';}
	.st12{font-size:20px;}
	.st13{letter-spacing:1;}
	.st14{font-family:'MuseoSansRounded-1000';}
	.st15{font-size:12px;}
	
		.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st17{fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st18{fill:#D1D3D4;}
	.st19{font-size:10px;}

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您为父SVG上的位置设置动画，并为text元素上的颜色设置动画，则可以实现此目的。

请参阅https://jsfiddle.net/cgbqq0f6/

修改

经过一些实验，看起来您无法在path或text元素上使用css变换动画。但是，可以将这些应用于包装器元素（例如通用g标记，或者如果绑定到ID或类，则应用于特定的标记）：

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  75% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes colorText {
  0% {
    fill: #000000;
  }
  25% {
    fill: #000000;
  }
  50% {
    fill: #ff4a4a;
  }
  75% {
    fill: #000000;
  }
  100% {
    fill: #000000;
  }
}
@keyframes colorText {
  0% {
    fill: #000000;
  }
  25% {
    fill: #000000;
  }
  50% {
    fill: #ff4a4a;
  }
  75% {
    fill: #000000;
  }
  100% {
    fill: #000000;
  }
}

.animatable {
    position: relative;
    fill: #000;
     -webkit-animation: pulse 3s infinite ;
          animation: pulse 3s infinite ;
}

g.animatable {
    position: relative;
    fill: #000;
     -webkit-animation: pulse 2s infinite ;
          animation: pulse 2s infinite ;
}

.animatable text {
    
  -webkit-animation: colorText 3s infinite ;
          animation: colorText 3s infinite ;
}

<svg height="60" width="200" id="voer">
  <text x="0" y="15" fill="red" class="animatable">Voer</text>
    <g class="animatable"><text x="0" y="30" fill="red" class="two">Another</text></g>
    <g class="animatable">
			<path d="M150 0 L75 200 L225 200 Z" />
		</g>
</svg>

您可以在示例中看到，虽然第一个text元素具有animatable类，但它不会移动 - 这是因为我们试图直接为text元素设置动画。第二个执行移动，因为animatable类位于包装g元素上，因此动画将应用于该元素。

如果您按照示例将text元素包装在另一个标记中，则应该能够使用当前使用的方法为它们设置动画。