关键词：
【中文标题】带有变换的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 就消失了。用于动画关键帧的 Sass Mixin，包括多个阶段和变换属性
】用于动画关键帧的SassMixin，包括多个阶段和变换属性【英文标题】：SassMixinforanimationkeyframewhichincludesmultiplestagesandtransformproperty【发布时间】：2013-12-0716:09:35【问题描述】：这是我正在尝试生成但想使用SASSMixin来完成工作的标... 查看详情
为啥 css 动画不适用于背景大小 100%
...【发布时间】：2018-01-0302:02:56【问题描述】：我正在使用带有步骤的css动画...我的问题是：当step()==(framelength-1)时，除了我看不到最后一帧之外，一切都很流畅当step()==帧长度时，我仍然看不到最后一 查看详情
关键帧动画不适用于：moz 中的悬停元素和
】关键帧动画不适用于：moz中的悬停元素和【英文标题】：Keyframesanimationnotworkingonelementof:hoverinmozand【发布时间】：2016-04-2022:44:11【问题描述】：我遇到了一个问题，我想为:hover上的按钮内的一些文本设置动画。为了定位按钮的... 查看详情
SVG + css3 动画不适用于链接标记
】SVG+css3动画不适用于链接标记【英文标题】：SVG+css3animationnotworkingwithlinkmarkup【发布时间】：2013-05-2615:30:11【问题描述】：大家好！我一直在阅读ChrisCoyer(http://css-tricks.com/using-svg/)的精彩文章“使用SVG”，并决定使用一些东西来... 查看详情
我可以使用关键帧动画分别为多个 css 变换属性设置动画吗
】我可以使用关键帧动画分别为多个css变换属性设置动画吗【英文标题】：HowtoanimatemultipleCSStransformpropertiesseparatelyusingkeyframeanimation【发布时间】：2012-11-1419:23:51【问题描述】：我想使用这样的关键帧动画分别为两个（或更... 查看详情
css 过渡动画不适用于 svg 路径的“d”属性更改
】css过渡动画不适用于svg路径的“d”属性更改【英文标题】：csstransitionanimationdoesn\'tworkonsvgpath\'s"d\'attributechange【发布时间】：2015-12-2004:35:43【问题描述】：jsFiddle我正在尝试将css转换应用于svg各种元素。transition:all2s非常适... 查看详情
css变化过渡与动画(代码片段)
CSS变换用于在空间中移动物体，而CSS过渡和CSS关键帧动画用于控制元素随时间推移的变化。变换、过渡和关键帧动画的规范仍然在制定中。尽管如此，其中大多数特性已经在常用浏览器中实现了。1.二维变换CSS变换支持在页面中... 查看详情
基于百分比的 SCSS 停止关键帧 SVG 圆形动画
...充但我不明白如何停止动画。例如，我希望当我推动一个带有\'50\'的道 查看详情
CSS 动画不适用于 <img> 中的 svg
】CSS动画不适用于<img>中的svg【英文标题】：CSSanimationdonotworkforsvgin<img>【发布时间】：2018-02-1312:10:50【问题描述】：我正在尝试为图像/对象标签中的SVG设置动画，但它不起作用svgwidth:100%;height:200px;.rotate-45transform-origin:ce... 查看详情
使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转
】使用变换时，悬停时的CSS动画停留在最后一个关键帧：旋转【英文标题】：CSSanimationonhoverstayatlastkeyframewhenusingtransform:rotate【发布时间】：2014-10-2500:37:39【问题描述】：我试图让此动画在悬停时停留在其最后一个关键帧，但它... 查看详情
动画/关键帧在 Firefox 中不起作用（通过 JavaScript 启动 CSS 动画）
】动画/关键帧在Firefox中不起作用（通过JavaScript启动CSS动画）【英文标题】：animation/keyframesnotworkinginFirefox(startingCSSanimationviaJavaScript)【发布时间】：2015-08-1100:31:52【问题描述】：此代码适用于currentchrome和InternetExplorer，但不适用... 查看详情
关键帧动画问题
】关键帧动画问题【英文标题】：Troublewithkeyframesanimation【发布时间】：2020-12-2317:22:05【问题描述】：我正在做一个项目，其中包括两个不同颜色的svg作为导航栏中的动画图标。它们将彼此相邻放置，现在图标通过勾勒出每个单... 查看详情
Css hover 有时不适用于 svg 路径
...ths【发布时间】：2013-07-1101:46:36【问题描述】：我有一个带有路径的svg，我有css悬停在它们上面，但悬停有时有效，有时无效。可能是什么问题？<divid="map_wrapper"><svgxmlns="http://www.w3.org/2000/svg">< 查看详情
用于 css3 关键帧动画的 SASS（不是 SCSS）语法
】用于css3关键帧动画的SASS（不是SCSS）语法【英文标题】：SASS(notSCSS)syntaxforcss3keyframeanimation【发布时间】：2013-09-2413:20:11【问题描述】：有没有办法在SASS中编写关键帧？我发现的每个示例实际上都是SCSS，即使它说是SASS。明确... 查看详情
关键帧没有动画高度
...使其成为2s动画，但它并没有这样做，而是高度只是立即变换，但同一关键帧中的宽度正在设置动画。@importurl("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500 查看详情
SVG 动画不适用于 IE11
】SVG动画不适用于IE11【英文标题】：SVGanimationisnotworkingonIE11【发布时间】：2016-02-2202:12:33【问题描述】：我有一个非常简单的加载动画，可以在Firefox和Chrome上完美运行，但在IE11中它没有显示SVG图。以下是完整示例：JSFiddlesampleS... 查看详情
SVG 动画不适用于 IE11
】SVG动画不适用于IE11【英文标题】：SVGanimationisnotworkingonIE11【发布时间】：2017-01-2103:16:24【问题描述】：我有一个非常简单的加载动画，可以在Firefox和Chrome上完美运行，但在IE11中它没有显示SVG图。以下是完整示例：JSFiddlesampleS... 查看详情
通过滚动触发 CSS 关键帧动画
...发布时间】：2016-04-2912:35:22【问题描述】：假设我有一个带有动画的元素：#elementanimation:Fade3slinear1sforwards;@keyframesFade/*dostuff*/如何仅在用户向下滚动时触发此动画？VanillaJS、jQuery、ScrollMagic、GSA 查看详情