如何将SVG设为100%宽度且保持圆形半径不变？

你提到的场景我之前做响应式SVG图表时也碰到过，既要让SVG占满100%宽度，又要避免折线图的标记圆形随缩放变形，刚好有几个靠谱的方案可以解决：

• 直接使用vector-effect="non-scaling-size"
  这是最省心的方法，专门用来让元素的整体尺寸（包括圆形半径）不随SVG缩放而改变。只要给你的<circle>元素加上这个属性就行：

  <circle cx="50" cy="50" r="6" vector-effect="non-scaling-size" fill="#2563eb" />
  

  和non-scaling-stroke只维持线条粗细不同，non-scaling-size会让整个圆形的大小在SVG缩放时完全保持原始尺寸，完美适配你的需求。

• 通过JavaScript动态计算半径
  如果你的项目需要兼容对non-scaling-size支持不佳的旧环境，可以用JS监听SVG的尺寸变化，反向调整圆形半径：

  // 保存初始状态
  const svg = document.querySelector('svg');
  const circles = svg.querySelectorAll('circle');
  const initialSvgWidth = svg.getBoundingClientRect().width;
  const initialRadius = parseFloat(circles[0].getAttribute('r'));
  
  // 监听尺寸变化并调整半径
  const resizeObserver = new ResizeObserver(() => {
    const currentWidth = svg.getBoundingClientRect().width;
    const scaleRatio = initialSvgWidth / currentWidth;
    circles.forEach(circle => {
      circle.setAttribute('r', initialRadius * scaleRatio);
    });
  });
  
  resizeObserver.observe(svg);
  

  这个方法通过计算SVG的缩放比例，反向修正圆形半径，确保视觉上大小始终一致，兼容性拉满。

• 调整viewBox与preserveAspectRatio的组合（备选方案）
  如果你可以接受SVG高度随宽度自适应（而非固定高度），可以去掉preserveAspectRatio="none"，改用preserveAspectRatio="xMidYMid meet"或"xMinYMin slice"，配合合适的viewBox值。这样SVG会保持原始宽高比缩放，圆形自然不会变形，但缺点是无法强制固定高度，需要根据布局需求权衡。

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