如何响应式居中嵌套SVG？寻求百分比transform解决方案

可以实现嵌套SVG在父SVG中居中，使用<g>标签包裹是可行的方案，同时也能实现基于百分比的transform布局，无需依赖固定数值。

核心实现思路 #

利用SVG的坐标系统特性，通过x/y属性结合transform: translate()的百分比值完成居中：

1. 用x="50%" y="50%"将子SVG的左上角定位到父SVG的中心；
2. 再通过transform: translate(-50%, -50%)让子SVG向左、向上偏移自身宽高的50%，实现整体居中。

代码示例 #

方式1：直接给子SVG设置属性

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 331.45 409.46"
  {...props}
> 
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 177.44 210.55"
    x="50%"
    y="50%"
    transform="translate(-50%, -50%)"
    {...props}
  > 
    <!-- 子SVG内容 -->
  </svg>
</svg>

方式2：用<g>标签包裹子SVG

如果需要对子SVG做更多统一变换，用<g>包裹会更灵活：

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 331.45 409.46"
  {...props}
> 
  <g transform="translate(50%, 50%)">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 177.44 210.55"
      transform="translate(-50%, -50%)"
      {...props}
    > 
      <!-- 子SVG内容 -->
    </svg>
  </g>
</svg>

说明 #

两种方案都完全基于百分比计算，不需要手动计算父与子SVG的尺寸差值，当父或子SVG的viewBox尺寸变化时，居中效果会自动适配，适配性更强。

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