SVG 动画圆圈垂直和水平居中

Question

我正在尝试创建一个 SVG 加载占位符，我想将 3 个动画 圆圈垂直和水平放置在矩形中的中心，而不会相互重叠。我尝试将它们放入 g 并使用 CSS 应用 width 和 margin 但这不起作用。有没有办法实现？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="200" viewBox="0 0 500 100">
      <rect width="100%" height="100%" fill="#f3f3f3"/>
      <circle fill="#2FC143" stroke="none" cx="6" cy="50" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"></animateTransform>
      </circle>
      <circle fill="#2FC143" stroke="none" cx="30" cy="50" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin="0.2"></animateTransform>
      </circle>
      <circle fill="#2FC143" stroke="none" cx="54" cy="50" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
      </circle>
</svg>

Answer 1

我会简化 SVG 并使用 css 来布置 SVG 在其父容器中的位置/方式。

另外，如果您在 SVG 填充属性中使用 currentColor，颜色将被继承。

body,
html {
  margin: 0;
  height: 100%;
}

.svg-wrapper {
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

svg {
  width: 60px;
  color: #2FC143;
}

.secondary {
  background: #ddd;
  height: 100px;
  width: 300px;
}

.secondary svg {
  color: lightcoral;
}

<div class="svg-wrapper">
  <svg viewBox="0 0 60 42">
      <circle fill="currentColor" stroke="none" cx="6" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="30" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin="0.2"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="54" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
      </circle>
  </svg>
</div>

<div class="svg-wrapper secondary">
  <svg viewBox="0 0 60 42">
      <circle fill="currentColor" stroke="none" cx="6" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="30" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin="0.2"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="54" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
      </circle>
  </svg>
</div>

没有 CSS 你可以使用preserveAspectRatio

<svg viewBox="0 0 60 42" preserveAspectRatio="xMidYMid meet" width="500" height="400">
      <rect width="100%" height="100%" fill="#f3f3f3"/>
      <circle fill="currentColor" stroke="none" cx="6" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="30" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin="0.2"></animateTransform>
      </circle>
      <circle fill="currentColor" stroke="none" cx="54" cy="21" r="6">
        <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
      </circle>
  </svg>