个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我尝试使用 CSS 关键帧动画对 SVG 文本进行动画处理时，它不会对变换属性进行动画处理。动画填充属性在同一个动画中工作。所以动画被执行。
动画之外的变换有效，所以我不知道为什么它在动画中不起作用。
代码只能在 Chrome 中运行。
我的 SVG(片段):
<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;
}
.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;}<?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>最佳答案
如果为父 SVG 上的位置设置动画，并为 text 元素上的颜色设置动画，则可以实现此目的。
参见 https://jsfiddle.net/cgbqq0f6/
编辑:
经过一些试验，您似乎无法在 path 或 text 元素上使用 css 转换动画。但是，您可以将它们应用于包装器元素(例如通用 g 标记，或者绑定(bind)到 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 元素包装在另一个标签中，您应该能够使用您当前使用的方法为它们设置动画。
关于具有变换的CSS关键帧动画不适用于SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33563586/
25
4
0
这是代码片段。 请说出这种用小内存存储大数据的算法是什么。 public static void main(String[] args) { long longValue = 21474836
所以我使用 imap 从 gmail 和 outlook 接收电子邮件。 Gmail 像这样编码 =?UTF-8?B?UmU6IM69zq3OvyDOtc68zrHOuc67IG5ldyBlbWFpb
很久以前就学会了 C 代码；想用 Scheme 尝试一些新的和不同的东西。我正在尝试制作一个接受两个参数并返回两者中较大者的过程，例如 (define (larger x y) (if (> x
Azure 恢复服务保管库有两个备份配置选项 - LRS 与 GRS 这是一个有关 Azure 恢复服务保管库的问题。 当其驻留区域发生故障时，如何处理启用异地冗余的恢复服务保管库？如果未为恢复服务启
说，我有以下实体： @Entity public class A { @Id @GeneratedValue private Long id; @Embedded private
我有下一个问题。 我有下一个标准: criteria.add(Restrictions.in("entity.otherEntity", getOtherEntitiesList())); 如果我的
如果这是任何类型的重复，我会提前申请，但我找不到任何可以解决我的具体问题的内容。 这是我的程序: import java.util.Random; public class CarnivalGame{
我目前正在使用golang创建一个聚合管道，在其中使用“$ or”运算符查询文档。 结果是一堆需要分组的未分组文档，这样我就可以进入下一阶段，找到两个数据集之间的交集。 然后将其用于在单独的集合中进行
是否可以在正则表达式中创建 OR 条件。 我正在尝试查找包含此类模式的文件名列表的匹配项 第一个案例 xxxxx-hello.file 或者案例二 xxxx-hello-unasigned.file
该程序只是在用户输入行数时创建菱形的形状，因此它有 6 个 for 循环； 3 个循环创建第一个三角形，3 个循环创建另一个三角形，通过这 2 个三角形和 6 个循环，我们得到了一个菱形，这是整个程序
我有一个像这样的查询字符串 www.google.com?Department=Education & Finance&Department=Health 我有这些 li 标签，它们的查询字符串是这样
我有一个带有静态构造函数的类，我用它来读取 app.config 值。如何使用不同的配置值对类进行单元测试。我正在考虑在不同的应用程序域中运行每个测试，这样我就可以为每个测试执行静态构造函数 - 但我
我正在寻找一个可以容纳多个键的容器，如果我为其中一个键值输入保留值(例如 0)，它会被视为“或”搜索。 map, int > myContainer; myContainer.insert(make_
我正在为 Web 应用程序创建数据库，并正在寻找一些建议来对可能具有多种类型的单个实体进行建模，每种类型具有不同的属性。 作为示例，假设我想为“数据源”对象创建一个关系模型。所有数据源都会有一些共享属
(1) =>CREATE TABLE T1(id BIGSERIAL PRIMARY KEY, name TEXT); CREATE TABLE (2) =>INSERT INTO T1 (name)
我不确定在使用别名时如何解决不明确的列引用。 假设有两个表，a 和 b，它们都有一个 name 列。如果我加入这两个表并为结果添加别名，我不知道如何为这两个表引用 name 列。我已经尝试了一些变体，
我的查询是: select * from table where id IN (1,5,4,3,2) 我想要的与这个顺序完全相同，不是从1...5，而是从1,5,4,3,2。我怎样才能做到这一点？ 最
我正在使用 C# 代码执行动态生成的 MySQL 查询。抛出异常: CREATE TABLE dump ("@employee_OID" VARCHAR(50)); "{"You have an er
我有日期 2016-03-30T23:59:59.000000+0000。我可以知道它的格式是什么吗？因为如果我使用 yyyy-MM-dd'T'HH:mm:ss.SSS，它会抛出异常 最佳答案 Sim
我有一个示例模式，它的 SQL Fiddle 如下: http://sqlfiddle.com/#!2/6816b/2 这个 fiddle 只是根据 where 子句中的条件查询示例数据库，如下所示:
我是一名优秀的程序员,十分优秀！