如何在不依赖HTML渲染尺寸的情况下居中SVG元素？

当然可以！完全不用依赖HTML里设置的宽高（比如你示例里的25px），SVG本身就有几种简便的居中方案，和你提到的CSS绝对定位居中逻辑几乎一致，不用手动计算偏移数值。

方法1：复刻CSS的「居中平移」逻辑（最贴合你的需求） #

你可以在SVG内部用嵌套的<g>元素模拟CSS里的父容器和子元素关系，完全用SVG的transform属性实现居中，根本不需要管HTML里设置的尺寸：

<svg viewBox="0 0 100 100" width="25" height="25">
  <symbol id="bar">
    <title>Bar</title>
    <desc>Bar for forming hamburger menu button</desc>
    <rect width="100" height="10"/>
  </symbol>
  <!-- 模拟CSS里的父容器：先平移到SVG视口中心 -->
  <g transform="translate(50%, 50%)">
    <!-- 模拟CSS里的子元素：反向平移自身的50%实现完美居中 -->
    <g id="hamburger" transform="translate(-50%, -50%)">
      <use y="0" xlink:href="#bar"/>
      <use y="20" xlink:href="#bar"/>
      <use y="40" xlink:href="#bar"/>
    </g>
  </g>
</svg>

这里的核心逻辑和你给出的CSS代码完全对应：

• 外层<g>的translate(50%,50%)就相当于CSS里的top:50%;left:50%，把元素的左上角移到视口中心；
• 内层<g>的translate(-50%,-50%)就相当于transform: translate(-50%,-50%)，把元素往回挪自身的一半尺寸，实现整体居中。

而且这个方案完全基于SVG自己的viewBox坐标系（100x100），不管你在HTML里把SVG设成25px还是50px，居中效果都不会受影响。

方法2：直接调整汉堡在viewBox里的位置（更简洁） #

因为你的汉堡总高度是40（三个bar，每个10，间距10），总宽度是100，所以你可以直接把汉堡组移到viewBox的中心位置，不用嵌套<g>：

<svg viewBox="0 0 100 100" width="25" height="25">
  <symbol id="bar">
    <title>Bar</title>
    <desc>Bar for forming hamburger menu button</desc>
    <rect width="100" height="10"/>
  </symbol>
  <!-- 直接计算中心偏移：(视口高度-汉堡高度)/2 = (100-40)/2 = 30 -->
  <g id="hamburger" transform="translate(0, 30)">
    <use y="0" xlink:href="#bar"/>
    <use y="20" xlink:href="#bar"/>
    <use y="40" xlink:href="#bar"/>
  </g>
</svg>

这个方法是基于viewBox的固定尺寸计算一次偏移，之后不管HTML里怎么改SVG的宽高，因为viewBox会自动缩放，汉堡始终保持在SVG的中心。不过这种方法需要你知道汉堡的实际尺寸，而第一种方法完全不用管元素尺寸，更通用。

额外技巧：用preserveAspectRatio控制SVG在HTML容器里的居中 #

如果你还想让整个SVG在它的HTML父容器里居中，也可以不用CSS，直接给SVG加preserveAspectRatio="xMidYMid meet"属性（这个其实是SVG的默认值，但有时候会被覆盖）：

<svg viewBox="0 0 100 100" width="25" height="25" preserveAspectRatio="xMidYMid meet">
  <!-- 内部内容同上 -->
</svg>

这个属性会让SVG的内容在HTML设置的宽高范围内，保持比例并居中显示。

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