如何为SVG rect使用计算宽度？背景图场景失效问题解决

问题分析 #

你遇到的问题是：SVG直接嵌入HTML时，<rect>的width="calc(100% - 60px)"能正常渲染，但将SVG转为data URL作为背景图后，这个宽度计算失效，导致rect尺寸异常。

根本原因 #

1. SVG作为嵌入HTML的元素时，浏览器会兼容解析属性中的CSS表达式（如calc()），但当SVG作为**图像资源（背景图）**加载时，SVG的属性值仅支持标准长度格式，无法解析CSS的calc()表达式。
2. 缺少viewBox属性导致SVG作为背景图缩放时，无法正确映射元素的坐标和尺寸，进一步加剧了尺寸适配问题。

修复方案 #

1. 将rect的宽度从SVG属性移至CSS样式

把<rect>的width属性替换为style属性中的CSS定义，让CSS引擎正常解析calc()表达式。

2. 添加viewBox和preserveAspectRatio属性

确保SVG在缩放时能正确适配容器的尺寸，避免元素变形或位置偏移。

3. 使用更可靠的SVG序列化方法

替换btoa为XMLSerializer+encodeURIComponent，避免字符编码问题导致SVG解析失败。

修改后的完整代码 #

HTML

<svg
  width="100%"
  height="48"
  viewBox="0 0 100 48"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  stroke="none"
  fill="grey"
>
  <circle cx="24" cy="24" r="12" />
  <!-- 将width属性改为style中的CSS定义 -->
  <rect height="20" x="48" y="14" rx="10" ry="7" style="width: calc(100% - 60px);" />
</svg>

<div id="xyz" style="border: red 1px solid; height: 300px; width: 100%"></div>

CSS

svg {
  height: 48px;
}
#xyz {
  background-repeat: repeat-y;
  background-size: 100% 48px;
}

JavaScript

// 用XMLSerializer序列化SVG，避免outerHTML的兼容性问题
const svgElement = document.querySelector('svg');
const svgString = new XMLSerializer().serializeToString(svgElement);
// 使用encodeURIComponent处理字符串，替代btoa避免编码错误
const svgURL = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString);
document.querySelector('#xyz').style.backgroundImage = `url(${svgURL})`;

关键说明 #

• viewBox="0 0 100 48"定义了SVG的坐标系范围（宽度100单位，高度48单位），配合preserveAspectRatio="none"让SVG完全拉伸适配容器尺寸。
• 将width移至style后，无论SVG是嵌入HTML还是作为背景图，CSS引擎都会正确解析calc()表达式。
• XMLSerializer是标准的SVG序列化API，比直接取outerHTML更可靠，encodeURIComponent能正确处理UTF-8字符，避免btoa在处理特殊字符时的编码问题。

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