0
Ich habe ein Problem, dass ich SVG-Animation in keinem Browser sehen kann (Ich überprüfte Google Chrome, Firefox, Edge und Internet Explorer). Ich habe andere Browser nicht überprüft, weil ich normalerweise Google Chrome verwende und ich möchte, dass diese Animation in diesem Browser funktioniert. Ich habe -webkit- hinzugefügt, aber es funktioniert immer noch nicht.SVG-Animation funktioniert nicht
Das ist mein HTML:
<!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>
Und das ist mein CSS:
/* --------------------
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;
}
ist SVG überhaupt gezeigt? – jelic98