html - SVG 动画不起作用

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 6 年前。

我有一个问题，我无法在任何浏览器中看到 SVG 动画(我检查了 Google Chrome、Firefox、Edge 和 Internet Explorer)。我没有检查其他浏览器，因为我通常使用 Google Chrome，我希望该动画能够在该浏览器上运行。我添加了 -webkit- 但它仍然无法正常工作。

<!DOCTYPE html> <html> <head> <title>Badge Animation</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg class="badge" xmlns="http://www.w3.org/2000/svg" height="440" width="440" viewBox="-40 -40 440 440"> <circle class="outer" fill="#F9D535" stroke="#fff" stroke-width="8" stroke-linecap="round" cx="180" cy="180" r="157"/> <circle class="inner" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/> <path class="inline" d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="7" stroke-linecap="round" fill="none"/> <g class="star"> <path fill="#F9D535" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/> <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/> <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/> <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/> <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/> <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/> </g> </svg> </body> </html>

/* -------------------- Base ---------------------- */ body { background: #8069a1; padding-top: 60px; } svg { margin: auto; display: block; } /* --------------------- Keyframes --------------------- */ @keyframes grow { 0% { transform: scale (0); } 30% { transform: scale (1.1); } 60% { transform: scale (0.9); } 100% { transform: scale (1); } } @-webkit-keyframes grow { 0% { -webkit-transform: scale (0); } 30% { -webkit-transform: scale (1.1); } 60% { -webkit-transform: scale (0.9); } } /* -------------------------- SVG Styles --------------------------- */ .badge * { transform-origin: 50% 50%; } .badge * { -webkit-transform-origin: 50% 50%; } .outer, .inner, .inline { animation: grow 1s ease-out backwards; } .outer, .inner, .inline { -webkit-animation: grow 1s ease-out backwards; } .inner { animation-delay: .1s; } .inner { -webkit-animation-delay: .1s; } .inline { animation-delay: .15s; } .inline { -webkit-animation-delay:.15s; }

body { background: #8069a1; padding-top: 60px; } svg { margin: auto; display: block; } @keyframes grow { 0% { transform: scale(0); } 30% { transform: scale(1.1); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } } @-webkit-keyframes grow { 0% { -webkit-transform: scale(0); } 30% { -webkit-transform: scale(1.1); } 60% { -webkit-transform: scale(0.9); } } .badge * { transform-origin: 50% 50%; } .badge * { -webkit-transform-origin: 50% 50%; } .outer, .inner, .inline { animation: grow 1s ease-out backwards; } .outer, .inner, .inline { -webkit-animation: grow 1s ease-out backwards; } .inner { animation-delay: .1s; } .inner { -webkit-animation-delay: .1s; } .inline { animation-delay: .15s; } .inline { -webkit-animation-delay: .15s; }

html - SVG 动画不起作用

上一篇：javascript - 使用html更改鼠标单击表格单元格的颜色

下一篇：html - 创建标题的背景权