带有变换的css关键帧动画不适用于SVG
Posted
技术标签:
【中文标题】带有变换的css关键帧动画不适用于SVG【英文标题】：css keyframes animation with transform not working on SVG 【发布时间】：2016-02-07 09:51:36 【问题描述】：当我尝试使用 CSS 关键帧动画为 SVG 文本设置动画时，它不会为变换属性设置动画。动画填充属性在同一个动画中起作用。所以动画被执行了。
动画之外的变换工作，所以我不知道为什么它在动画中不起作用。
代码只能在 Chrome 中运行。
我的 SVG（sn-p）：
<text x="274.546" y="331.6133" id="Voer" class="st14 st15 clickable">Voer</text>
我的 CSS 代码：
@-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);
解决重新创建的问题：https://jsfiddle.net/17ecnuLu/
@-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;
.st0opacity:0.3;fill:#CBDB2A;
.st1fill-rule:evenodd;clip-rule:evenodd;fill:#306F9C;
.st2fill:none;stroke:#306F9C;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st3fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;stroke:#1ABECB;stroke-miterlimit:10;
.st4fill:none;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st5fill:#1ABECB;stroke:#1ABECB;stroke-width:0.144;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st6font-family:'HWTArtz';
.st7font-size:5.52px;
.st8font-size:5.4223px;
.st9fill-rule:evenodd;clip-rule:evenodd;fill:#1ABECB;
.st10fill:none;stroke:#1ABECB;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st11font-family:'MuseoSansRounded-700';
.st12font-size:20px;
.st13letter-spacing:1;
.st14font-family:'MuseoSansRounded-1000';
.st15font-size:12px;
.st16fill-rule:evenodd;clip-rule:evenodd;fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st17fill:#E11B22;stroke:#DD1F26;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
.st18fill:#D1D3D4;
.st19font-size:10px;<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.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" x="0px" y="0px"
viewBox="0 0 831 442.7" style="enable-background:new 0 0 831 442.7;" xml:space="preserve">
<g id="Zoniënwoud">
<polygon class="st0" points="535,442.7 535,440.3 531.6,437.2 531.6,433.4 527.8,425 531.1,419.2 537.4,410.8 537.4,394.5
528,360.9 526.3,347.7 539.8,339.8 539.8,329.5 548.7,324.4 544.6,317.5 544.6,304.5 544.6,280.7 552.7,254.8 557.5,251.9
557.5,238.5 577,232.5 581.1,256.3 575.5,259.4 577,269 582.5,272.1 593.5,263.7 584.4,235.6 578.4,201.5 567.1,170.8 548.2,180.7
540.3,153.1 548.9,144.2 546,125 547.7,116.8 570,102.4 582,132.7 593.8,135.8 606.5,134.3 606.5,131.7 597.6,125.2 591.1,113.9
589.2,104.1 602.9,83.7 613.5,72.9 610.3,69.8 603.9,56.1 592.6,40.7 585.9,29.2 577.9,15.3 563.1,6.9 554.4,11.9 545.5,19.4
537.6,23.7 522,25.1 514.8,21.1 500.2,19.4 425.1,49.4 418.8,47 412.6,54.7 395.5,61.1 351.4,77.7 361,112.7 362.7,120.4
376.1,143.7 394.1,165.8 434.9,165.8 463.7,201.8 463.7,209 449.8,229.1 439.2,229.1 407.8,267.3 404.2,267.3 397.5,259.4
394.3,249.1 389.1,238 381.4,230.6 370.6,241.4 360.3,235.4 357.4,238 348,236.3 340.1,244.3 332.2,239.7 318,247.9 310.8,240.7
302.7,248.8 312.7,262.5 306.7,278.3 310.1,284.1 309.4,288.7 285.6,294.2 262.8,301.1 257.8,272.1 249.4,272.1 249.4,259.6
242.2,259.6 238.1,252.2 235.2,250.5 225.9,255.8 220.3,245.9 214.8,246.7 205.7,237.5 199,235.6 191.5,239.7 185.3,239.7
165.4,259.6 160.8,256.7 141.6,278.6 124.6,268.7 102,287.9 "/>
</g>
<g id="Water">
<path class="st1" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st2" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st1" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<path class="st2" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<polyline class="st1" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 554.2,100.5 "/>
<polygon class="st2" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 "/>
<path class="st3" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st4" d="M614,36.2L614,36.2c0.5-0.2,1-0.3,1.6-0.3h5.3c0.1,0,0.3,0,0.4,0l0,0c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.6,0.1
c2.6,0.6,4.3,0.9,5.2,1c1,0.1,2.9-0.2,5.6-1l1.1-0.7l6.5-2.2l17-1.4l24.7-3.1h13l23.2,3.1h11.6l17.6-4l20.4-6l17.6-3.7l23.5-2.6
l21-3.7l0.2,1.4l-21,3.7l-23.5,2.5l-17.5,3.7L748,29.1l-17.8,4h-11.9L695.1,30h-12.9l-24.6,3.1l-16.9,1.4l-6.2,2.1l-1.4,0.8
c-0.6,0.3-1.2,0.8-1.8,1.5c-0.7,0.7-1.5,1.9-2.5,3.6c-1,1.7-2.1,3.2-3.3,4.4l-1.8,1.1l-14.9,9.6l-2.3,0.6l-1.1-1.1v-1.4l4.4-5.2
c0.7-0.9,1-1.7,0.9-2.6c-0.4-0.3-1.1-0.5-1.9-0.6h-6.2l-1.3-8.1l6.4-0.6L614,36.2"/>
<path class="st1" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<path class="st5" d="M597.2,64.3c0-0.4,0.5-1.3,1.6-2.5c1.1-1.2,1.9-2.1,2.6-2.8c0.6-0.6,1.2-1.1,1.6-1.3c0.5-0.3,0.8-0.3,1.1,0
c0.3,0.3,0.4,0.7,0.4,1.2c0,0.5-0.2,1.1-0.5,1.6c-0.3,0.6-1,1.2-2,2c-1,0.8-1.8,1.4-2.3,2c-0.6,0.6-1.1,0.8-1.6,0.6
C597.5,65,597.3,64.7,597.2,64.3"/>
<polyline class="st3" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 554.2,100.5 "/>
<polygon class="st4" points="554.2,100.5 559.2,97.6 565.7,91.1 570,83.7 577,75.3 583.7,70 585.6,69.8 587.5,71.9 589.9,74.1
590.4,75.3 589.2,76 584.9,78.7 582,82.3 579.6,88.3 577.9,90.2 574.8,91.9 572.4,94.5 568.8,97.9 560.7,104.8 556.8,105.8
555.1,104.8 553.5,101.9 553.2,101 "/>
<text transform="matrix(1.0117 0 0 1 658.5792 51.0534)" class="st6 st7"> </text>
<text transform="matrix(1 0 0 1.018 669.1387 51.0534)" class="st6 st8"> </text>
<polyline class="st9" points="566.7,26.8 562.1,27.3 557.8,26.6 554.7,26.8 552.3,28.3 547.7,31.6 542.7,34.7 537.6,36.7
531.1,40.3 524.2,43.9 521.1,45.8 495.9,56.8 484.6,60.7 454.1,78.2 447.6,83.7 432.3,95.7 411.1,107.9 400.6,111.5 398.2,112.7
397.2,113.5 378,140.3 362.4,167.5 340.3,193.9 328.3,200.8 305.5,223.6 303.6,230.6 309.4,240.7 309.9,242.8 308.4,246.7
308.4,247.6 308.9,250 315.6,258.7 316.8,262.7 316.8,266.8 316.1,272.6 315.6,276.4 315.6,281 315.1,286 315.6,288.7 319,297.1
319.7,301.6 319,307.4 317.1,313.6 314.7,320.6 313.7,324.2 312,336.4 312,344.1 309.6,357.8 309.6,366.2 306.5,376.3 306,385.6
306,399.3 298.3,413.5 297.1,413 304.6,399.1 304.6,385.6 305.1,376 308.2,365.9 308.2,357.8 310.6,344.1 310.6,336.4 312.5,323.9
313.5,320.1 315.9,313.1 317.5,306.9 318.3,301.9 317.5,297.5 314.2,288.9 313.7,286.3 314.2,281 314.2,276.4 314.7,272.3
315.6,266.6 315.6,263 314.2,259.4 307.5,250.7 307,247.6 307.2,246.2 308.4,242.8 307.9,241.1 301.9,230.8 304.3,222.9
327.6,199.6 339.4,192.7 361.2,166.7 376.8,139.4 396.3,112.5 379.2,116.1 370.3,118.5 360.3,119.9 353.1,120.7 331.7,113.9
307.5,112.5 275.1,120.7 240,129.1 213.4,129.1 213.6,129.3 212.4,129.1 209.3,129.1 203.3,130 167.1,144.2 123.4,160 90.3,167.5
59.5,175.4 41.8,179.2 15.6,183.3 0.5,183.3 0.5,182.1 15.4,182.1 41.5,177.8 59.1,173.9 90,166 122.9,158.8 166.6,143
202.8,128.6 209.1,127.6 239.8,127.6 274.8,119.5 307.2,111.1 332.2,112.5 353.1,119.2 360,118.5 370.1,117.1 379,114.7
400.3,110.3 410.4,106.5 431.5,94.5 446.7,82.7 453.4,77 483.9,59.2 495.1,55.4 520.3,44.6 523.5,42.7 528.7,39.1 533.3,34.5
539.1,32.8 546.3,28.5 549.6,24.4 553.9,21.3 558.7,21.1 565.9,22.7 571.5,26.8 578.9,32.6 580.6,35.7 580.6,42.9 582.7,42.9
587.8,42.2 594.5,40 600,39.3 601.2,47.9 594.3,49.9 588,51.5 585.4,51.5 584.2,51.3 580.6,47.5 579.1,45.3 579.1,35.9 577.7,33.5
570.5,28 568.3,27.1 566.7,26.8 "/>
<polygon class="st10" points="566.7,26.8 562.2,27.3 557.8,26.6 554.7,26.8 552.3,28.3 547.8,31.6 542.7,34.7 537.7,36.7
531.2,40.3 524.3,43.9 521.2,45.8 496,56.8 484.8,60.7 454.3,78.2 447.9,83.7 432.5,95.7 411.4,107.9 400.9,111.5 398.5,112.7
397.5,113.5 378.4,140.3 362.8,167.5 340.7,193.9 328.8,200.8 306,223.6 304.1,230.6 309.8,240.7 310,242.8 308.3,246.7
308.3,247.6 309,250 315.9,258.7 317.3,262.7 317.3,266.8 316.6,272.6 316.3,276.4 316.3,281 315.7,286 316.1,288.7 319.4,297.1
320.1,301.6 319.4,307.4 317.5,313.6 315.1,320.6 314,324.2 312.3,336.4 312.3,344.1 310.3,357.8 310.3,366.2 306.9,376.3
306.3,385.6 306.3,399.3 298.7,413.5 297.7,413 305.3,399.1 305.3,385.6 305.4,376 308.3,365.9 308.3,357.8 311.3,344.1
311.3,336.4 313.1,323.9 314,320.1 316.3,313.1 318,306.9 318.7,301.9 318,297.5 314.6,288.9 314,286.3 314.3,281 314.3,276.4
315,272.3 316.3,266.6 316.3,263 314.7,259.4 308,250.7 307.5,247.6 307.7,246.2 308.9,242.8 308.4,241.1 302.4,230.8 304.8,222.9
328,199.6 339.8,192.7 361.6,166.7 377.2,139.4 396.6,112.5 379.6,116.1 370.7,118.5 360.6,119.9 353.4,120.7 332.1,113.9
307.9,112.5 275.6,120.7 240.6,129.1 214,129.1 214.2,129.4 213,129.1 209.9,129.1 203.9,130 167.7,144.2 124.1,160 91,167.5
60.4,175.4 42.6,179.1 16.5,183.1 0.5,183.1 0.5,182.1 16.3,182.1 42.4,177.8 59.9,173.9 90.8,166 123.6,158.8 167.2,143
203.4,128.8 209.7,128.1 240.3,128.1 275.3,119.7 307.7,111.2 332.6,112.6 353.4,119.2 360.4,118.5 370.5,117.1 379.3,114.7
400.6,110.3 410.7,106.5 431.8,94.5 446.9,82.7 453.6,77 484,59.2 495.3,55.4 520.5,44.6 523.6,42.7 528.9,39.1 533.4,34.5
539.2,32.8 546.3,28.5 549.7,24.4 554,21.3 558.8,21.1 566,22.7 571.5,26.8 579.2,32.6 581.1,35.7 581.1,43.1 582.8,43.1
587.8,42.3 594.5,40.1 600,39.3 601.2,47.9 594.3,49.7 588,51.1 585.4,51.1 584.2,51.1 580.6,47.3 579.1,45.3 579.1,35.9
577.7,33.5 570.5,28 568.4,27.1 "/>
</g>
<g id="Gebouwen">
</g>
<g id="Namen">
<text transform="matrix(1 0 0 1 272.5991 151.6133)" class="st11 st12 st13">Fura</text>
<text transform="matrix(1 0 0 1 218.0431 188.6133)" class="st14 st15">Sint-Jan-de-Doper</text>
<g>
<g>
<polygon class="st16" points="305.9,158.2 303,155.3 300.1,158.2 300.5,158.7 300.5,162.6 305.4,162.6 305.4,158.7 "/>
<polygon class="st16" points="311,161.9 308.1,159 305.1,161.9 305.6,162.3 305.6,166.3 310.5,166.3 310.5,162.3 "/>
</g>
<g>
<polygon class="st16" points="291.6,158.2 288.7,155.3 285.8,158.2 286.3,158.7 286.3,162.6 291.2,162.6 291.2,158.7 "/>
<polygon class="st16" points="286.1,161.9 283.2,159 280.3,161.9 280.8,162.3 280.8,166.3 285.7,166.3 285.7,162.3 "/>
</g>
<polygon class="st16" points="299,165.5 296.1,162.6 293.1,165.5 293.6,166 293.6,169.9 298.5,169.9 298.5,166 "/>
</g>
<path class="st16" d="M332,182.7"/>
<g>
<polygon class="st16" points="334,184.8 331.1,181.9 328.2,184.8 328.7,185.3 328.7,189.2 333.6,189.2 333.6,185.3 "/>
<g>
<line class="st16" x1="331.1" y1="178.1" x2="331.1" y2="183.7"/>
<line class="st16" x1="329.7" y1="179.4" x2="332.5" y2="179.4"/>
</g>
</g>
<circle class="st17" cx="312.5" cy="328.6" r="3.2"/>
</g>
<g id="Referentiepunten">
<text transform="matrix(0.95 -0.3121 0.3121 0.95 122.4505 152.4042)" class="st18 st11 st19">Maalbeek</text>
<text transform="matrix(1 0 0 1 453.4195 212.28)" class="st18 st11 st12 st13">Zoniënwoud</text>
<text transform="matrix(1 0 0 1 593.3998 16.9999)" class="st18 st11 st12 st13">Vossem</text>
<g>
<text x="274.546" y="331.6133" id="Voer" class="st14 st15 clickable">Voer</text>
</g>
</g>
</svg>【问题讨论】：
你能做一个演示吗？ （jsfiddle，...） @Paulie_D 对不起，我测试了一下并复制了错误的代码，但它仍然无法正常工作（我已经编辑了问题中的代码）。 也许你可以做一个演示？ @sniels jsfiddle.net/17ecnuLu 给你！ @Paulie_D 我添加了一个 jsfiddle！ :) 【参考方案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 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 元素包装在另一个标签中，您应该能够使用您当前使用的方法为它们设置动画。
【讨论】：
如果只有一张地图和一个地方需要动画，这将是一个很好的解决方案。但这也必须适用于具有多个必须动画的地方的地图。另外我想避免手动将父元素添加到 20 个地图中的所有位置。 另外我忘了说元素会得到不同的延迟。因此，它们不必一次全部移动，而是轮流移动。 我现在看到了你的问题（你的问题没有提到你在 SVG 中有多个元素）。我已经更新了上面的答案。 我已经为此苦恼了一个小时，我的动画在台式机/android 上运行良好，但在我的旧 iPhone 上，我的transform 动画无法运行，我想不通找出原因，将其从text 移至g，然后 BAM 就消失了。以上是关于带有变换的css关键帧动画不适用于SVG的主要内容，如果未能解决你的问题，请参考以下文章
使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转