如何在灰色SVG中垂直水平居中loader（仅内联CSS或其他方法）

要实现loader在灰色SVG画布中垂直水平居中，只需将loader的两个路径元素包裹在<g>组中，并通过transform属性将其平移至画布中心即可，无需外部CSS。

修改后的完整代码 #

<svg viewBox="0 0 2560 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 灰色背景 -->
  <path fill="#F5F5F5" d="M0 0h2560v1440H0z"/>
  <!-- 将loader元素分组并平移到中心 -->
  <g transform="translate(1260 700)">
    <path opacity=".2" fill="#000" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/>
    <path fill="#000" d="m26.013 10.047 1.654-2.866a14.855 14.855 0 0 0-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite"/>
    </path>
  </g>
</svg>

原理说明 #

• 原SVG画布尺寸为2560×1440，中心坐标为(1280, 720)
• loader元素的原始中心为(20, 20)，因此通过translate(1260 700)将其移动到画布中心（1280-20=1260，720-20=700）
• 使用<g>分组可批量控制loader元素位置，且不会影响原有旋转动画效果

内容的提问来源于stack exchange，提问作者Ben