加shape-rendering仍模糊，主因是svg被光栅化（如用加载），该属性仅在矢量上下文中生效；需内联svg、删width/height、用em缩放、确保坐标整数对齐，并清理源文件冗余属性。
为什么加 shape-rendering 还是糊
加了 shape-rendering="crispEdges" 却没变锐利，大概率不是属性写错了，而是它根本没生效——SVG 被当作了位图渲染。比如用 <img src="icon.svg"> 加载时，浏览器先光栅化再缩放，shape-rendering 对已生成的位图无效。只有内联 SVG 或 <object></object> 等能保持矢量上下文的场景，该属性才起作用。
shape-rendering 的三个取值怎么选
不同渲染策略影响线条、文字和渐变的表现，不能一概设为 crispEdges：
-
crispEdges：关闭抗锯齿，适合纯线条/图标（如菜单图标、开关柄），但会让带圆角或斜线的路径边缘生硬 -
geometricPrecision：优先保真几何形状，适合需要精确比例的图表坐标轴、刻度线 -
auto（默认）：浏览器自主选择，高 DPR 下常启用模糊插值，正是模糊源头
推荐组合写法：<svg shape-rendering="crispEdges" text-rendering="geometricPrecision"></svg>，兼顾图标锐度与文字可读性。
必须配合的三件事，否则 shape-rendering 白加
这个属性只是“渲染开关”，不是“修复补丁”。它要起效，得确保 SVG 始终在矢量通道里运行：
- 删掉 SVG 标签上的
width和height属性（保留viewBox）；否则浏览器会按固定像素拉伸，提前光栅化 - 不用
transform: scale()放大 SVG，改用font-size或width: 1.5em驱动缩放，避免触发重采样 - 检查父容器是否产生小数像素：flex/gird 计算出
width: 23.7px会导致 SVG 内部坐标跨物理像素，shape-rendering也救不回亚像素模糊
Retina 屏下仍糊？先查 devicePixelRatio 是否对齐
即使写了 shape-rendering，在 iPhone 14（DPR=3）或某些安卓机上仍发虚，常见原因是 SVG 内部图形锚点没落在整数设备像素上：
- 路径的
x/y、cx/cy尽量用整数，避免0.5这类偏移值 - 描边宽度设为偶数（如
stroke-width="2"），并加vector-effect="non-scaling-stroke"防止缩放后变细或模糊 - 用
getBoundingClientRect()在控制台检查 SVG 实际渲染宽高，如果不是整数，说明布局链某处引入了小数
最隐蔽的坑是：你写的 CSS 全对，但构建工具注入了 image-rendering: smooth 覆盖了设置，或者设计师导出的 SVG 自带 width="24" 和内联 style，这些都得用 SVGO 清理干净才能让 shape-rendering 发挥作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
