基于Ant Design断点调整SVG尺寸，Safari报宽高属性无效错误

问题原因 #

Safari对SVG原生的width/height属性的单位支持比Chrome、Firefox严格得多——SVG标准里，这两个属性的合法单位只有**绝对长度单位（px、cm等）**或者不带单位（默认按px解析），而rem是CSS相对单位，不属于SVG原生属性认可的范围。Chrome和Firefox做了兼容处理，允许把CSS单位当作合法值，但Safari严格遵循规范，所以会抛出「Invalid value」错误。

解决办法 #

不要直接给SVG的width/height属性传rem单位的值，改用CSS来控制尺寸：

方案1：通过style属性内联设置

const { lg, xs } = useBreakpoint();
const height= lg ? "8rem" : xs ? "3rem" : "5rem";
const width= lg ? "20rem" : "15rem";

<SVG title={tooltip} style={{ width, height }} fill={color} />

方案2：用className配合CSS类（更适合复杂场景）

先定义CSS类：

.svg-lg {
  width: 20rem;
  height: 8rem;
}
.svg-md {
  width: 15rem;
  height: 5rem;
}
.svg-xs {
  width: 3rem;
  height: 3rem;
}

然后在组件里根据断点切换类：

const { lg, xs } = useBreakpoint();
const svgClass = lg ? "svg-lg" : xs ? "svg-xs" : "svg-md";

<SVG title={tooltip} className={svgClass} fill={color} />

这样不管在哪个浏览器，都会用CSS规则来解析rem单位，避免Safari的兼容性问题。

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