SVG设置viewBox缩放后线条颜色变淡的问题求助

这不是SVG缩放的固有特性，根源是线条宽度的单位与SVG缩放的联动关系。默认情况下，stroke-width使用的是SVG的用户单位，当你通过viewBox让SVG整体缩小时，1个用户单位对应的屏幕像素会随之变小，原本1用户单位宽的线条，实际显示可能不足1像素，再加上浏览器的抗锯齿渲染，就会看起来颜色变淡、线条变细。

给你两个不用重构坐标计算的解决方案：

• 使用vector-effect: non-scaling-stroke
  这是最省心的方案，直接给<polyline>或者整个SVG加上这个CSS属性，就能让线条宽度固定为屏幕像素的1px，不受SVG缩放影响。代码示例：

  polyline {
    stroke: black;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  

  这个属性现代浏览器都支持，不需要修改任何图形坐标的计算逻辑，直接解决问题。

• 动态计算并调整stroke-width
  如果需要兼容极旧浏览器（现在几乎没必要），可以根据viewBox的缩放比例反向调整线条宽度。比如原本SVG的默认尺寸是1500x900，当viewBox的宽度变为newWidth时，计算缩放比例，把stroke-width设为这个比例，保证实际显示宽度为1屏幕像素。示例代码：

  const originalWidth = 1500;
  // 假设你的viewBox格式是 "minX minY width height"
  const viewBoxParts = svgElement.getAttribute('viewBox').split(' ');
  const newViewBoxWidth = parseFloat(viewBoxParts[2]);
  const scaleFactor = originalWidth / newViewBoxWidth;
  
  // 给所有polyline设置调整后的stroke-width
  document.querySelectorAll('polyline').forEach(line => {
    line.style.strokeWidth = scaleFactor;
  });
  

简单来说，前者靠CSS特性直接固定线条显示尺寸，后者靠计算反向补偿缩放比例，都不需要重构你的坐标计算逻辑。

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