SVG设置preserveAspectRatio="none"后，如何保持圆形的宽高比？

因为你设置了preserveAspectRatio="none"，SVG会强制拉伸填满容器，导致圆形变形。要让特定元素保持宽高比，可以用以下几种方式：

• 给目标元素单独套一个SVG容器
  把需要保持比例的圆形放到独立的<svg>标签里，内部SVG不设置preserveAspectRatio="none"，通过x、y、width、height定位到原SVG的对应位置。示例代码：

  <svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">
    <!-- 其他按百分比绘制的元素 -->
    <svg x="30" y="50" width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
      <circle cx="0.5" cy="0.5" r="0.5" stroke="white"/>
    </svg>
  </svg>
  

  内部SVG的宽高对应原viewBox单位，viewBox设为0 0 1 1，确保圆形维持正圆形态。

• 使用<symbol>复用+<use>引用
  先定义带正确viewBox的<symbol>，再用<use>定位到目标位置，同时设置合适尺寸保证比例：

  <svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">
    <symbol id="circle-symbol" viewBox="0 0 1 1">
      <circle cx="0.5" cy="0.5" r="0.5" stroke="white"/>
    </symbol>
    <!-- 其他元素 -->
    <use href="#circle-symbol" x="29.5" y="49.5" width="1" height="1"/>
  </svg>
  

  <use>的x和y需减去圆形半径（0.5），让圆心对应原位置30,50。

• 用CSS变换修正拉伸
  通过计算容器宽高比，给圆形添加反向scale变换抵消拉伸。比如容器实际宽高比为W:H，给圆形设置transform: scale(Y/X, 1)，适合用JS动态处理：

  const svg = document.querySelector('svg');
  const circle = document.querySelector('circle');
  const aspectRatio = svg.clientWidth / svg.clientHeight;
  circle.style.transform = `scale(${1/aspectRatio}, 1)`;
  

  这种方式无需修改SVG结构，但依赖JS动态调整比例。

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