SVG calc() 在坐标属性中不自动重渲染的解决方案

chrome 中 svg 元素的 `x2=”calc(100% – 20px)”` 等 css `calc()` 值在父容器尺寸动态变化时不会自动更新，属已知兼容性限制；推荐改用 `padding-right` + `x2=”100%”` 的纯 css 方案实现等效响应式效果。

svg 的 、 等元素虽支持部分 CSS 属性（如 stroke），但其几何属性（x1, x2, y1, y2, width, height）本质上是 SVG 呈现属性（presentation attributes），而非标准 CSS 属性。尽管 Chrome 实验性支持 calc() 用于这些属性，但它不触发依赖于父容器尺寸变更的自动重计算与重渲染——这并非严格意义上的“渲染 bug”，而是因 SVG 属性未绑定到 CSS 布局引擎的动态计算链中所致。

更关键的是，该行为缺乏跨浏览器一致性：firefox 和 safari 完全不支持 calc() 用于 SVG 坐标属性，因此直接使用 x2=”calc(100% – 20px)” 会立即导致降级失效。真正健壮、可维护的方案应规避对 SVG 属性级 calc() 的依赖。

✅ 推荐解决方案：利用 SVG 容器的 CSS 盒模型控制可用绘图区域
通过为 border-box，可将右侧 20px 预留为空白边距；此时所有 x2=”100%” 的线条自然终止于内容区右边界（即父容器宽度 − 20px），且随父容器尺寸变化实时响应：

    
  Click me

⚠️ 注意事项：

• padding-right 必须配合 box-sizing: border-box 使用，确保 width: 100% 指代的是内容区 + 内边距的总宽，避免意外溢出；
• 所有坐标值（如 x1, x2, y1, y2）建议省略单位（如 “0” 而非 “0px”），符合 SVG 规范，提升兼容性；
• 若需多条不同偏移的线，可统一用 padding-right 控制基准，再结合 x1/x2 的相对数值微调（例如 x2=”95%”）；
• 此法同样适用于 、 等依赖水平尺寸的图形。

总结：与其依赖 Chrome 特有的、不可靠的 SVG calc() 行为，不如回归 CSS 盒模型本质——用 padding 定义安全边距，用 100% 表达弹性伸缩。这一方案零 js 计算、全浏览器兼容、自动响应式，是生产环境 SVG 布局的最佳实践。