Question

我遇到一个问题，我无法在任何浏览器中看到SVG动画（我检查过Google Chrome，Firefox，Edge和Internet Explorer）。我没有检查其他浏览器因为我通常使用谷歌浏览器，我希望该动画在这个浏览器上工作。我添加了-webkit-但它仍然无效。

这是我的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>

这是我的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;
}

Answer 1

transform值不正确。 scale（或translate等）和(<value>)之间不应有空格。所以，不是scale (1)而是scale(1)。

＆＃13;

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;
}

＆＃13;

<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>
  <circle class="inner" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"></circle>
  <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"></path>
  <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"></path>
    <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"></circle>
    <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"></circle>
    <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"></circle>
    <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"></circle>
    <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"></circle>
  </g>
</svg>

＆＃13;

SVG动画无效

1 个答案: