SVG缩放失真是因文字和描边不随容器缩放自适应，需用vector-effect="non-scaling-stroke"固定描边、结合transform:scale()或HTML覆盖控制文字。
SVG 默认会随容器缩放，但缩放后文字/描边可能糊或失真——这不是 bug，是 SVG 的坐标系统和渲染机制决定的，必须主动干预。
为什么 <svg> 放在 HTML 里一缩放就变形
SVG 元素默认使用 viewBox 定义逻辑坐标系，而浏览器按 CSS 尺寸（如 width: 100%）拉伸整个 SVG 渲染区域。此时：文字大小、stroke-width、font-size 都按像素固定，不随缩放重算，导致小尺寸下描边过粗、大尺寸下文字发虚。
-
viewBox和width/height同时存在时，浏览器优先按viewBox做比例映射，再用 CSS 尺寸决定最终画布大小 - 没有
viewBox的 SVG 会被当“位图”处理，缩放直接走光栅化，矢量优势全丢 -
preserveAspectRatio控制缩放对齐方式，但不解决描边/文字失真问题
用 vector-effect="non-scaling-stroke" 固定描边粗细
这是最直接有效的 CSS 层面修复，适用于需要保持描边始终为 1px（或任意固定视觉粗细）的场景，比如图标、流程图连线。
- 只对描边生效，不影响
fill或文字大小 - 需加在具体
<path>、<line>、<circle>等图形元素上，不能写在<svg>根节点 - 兼容性良好（Chrome 45+、Firefox 41+、Safari 9+、Edge 16+），IE 不支持
<svg viewBox="0 0 100 100"> <path d="M10,10 L90,10" stroke="black" stroke-width="2" vector-effect="non-scaling-stroke"/> </svg>
让文字随缩放自适应：用 rem 或 em + transform: scale() 拆解控制
SVG 内部的 <text> 不响应 CSS 的 font-size: 1rem（除非父级有 font-size 设置且继承链完整），更可靠的方式是结合容器缩放与局部反向缩放：
立即学习“前端免费学习笔记（深入）”；
- 给
<svg>设定 CSSwidth/height并启用缩放（如width: 100%; height: auto） - 把文字包裹进
<g transform="scale(1)">，再用 JS 或 CSS 计算当前缩放比，动态设置transform: scale(X)反向抵消 - 或者放弃 SVG 内置文字，用绝对定位的 HTML
<span>覆盖在 SVG 上，靠 JS 同步位置 —— 更灵活，也更容易做响应式字体
真正可控的方案：用 use + 外部 <defs> + JS 动态实例化
当 SVG 需要高频缩放（如地图、图表），硬编码所有尺寸会失控。推荐将图形定义抽到 <defs>，用 <use> 引用，并通过 JS 绑定缩放逻辑：
- 所有尺寸用相对单位（如
stroke-width="0.5"，基于viewBox="0 0 100 100"） - 监听容器尺寸变化，用
getBoundingClientRect()算出实际缩放系数 - 对每个
<use>元素设置transform="scale(sx, sy)"，同时调整其内部<text>的font-size（按相同比例） - 避免直接修改
viewBox，否则会触发重排，性能差
缩放不是“让 SVG 变大变小”，而是协调 viewBox、CSS 尺寸、图形属性三者关系。最容易被忽略的是：文字和描边必须各自独立控制缩放行为，混在一起调一个 width 就必然出问题。
