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

Posted 2023-03-28

【中文标题】SVG 动画圆圈垂直和水平居中

【英文标题】：SVG animated circles to the center vertically and horizontally

【发布时间】：2021-11-18 05:15:09

【问题描述】：

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 500 100">
      <rect   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>

【参考方案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"  >
      <rect   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>

【讨论】：

我认为动画和半径可以做到的最小viewBox高度是42，动画在这段代码sn-p中被剪掉了一点。此外，xmnls 属性可以完全删除，因为它是内联 SVG，而不是用作图像。

感谢@JHeth 更新了您的建议

@ksav 我正在使用 LiteSpeed Webserver 插件，它只允许内联 SVG。我没有用 HTML 包装它的选项。不过谢谢。