chrome 浏览器中，svg 元素属性（如 `x2`）直接使用 `calc(100% - 20px)` 无法自动重渲染以响应父容器宽度变化，属已知兼容性限制；本文提供稳定、跨 svg 属性类型且无需 js 手动更新的 css 替代方案。
在 SVG 中直接对 x1、x2、y1、y2 等几何属性使用 CSS calc() 函数（例如
值得注意的是，Firefox 和 Safari 完全不支持 SVG 属性中的 calc()，这意味着该写法本身不具备跨浏览器可行性。而实验发现：当 y2="100%"（百分比单位）与 x2="calc(...)" 并存时，整条线意外更新——这并非修复，而是因 y2 的百分比触发了 SVG 视口重计算，间接带动了 x2 的重新求值，属于不可靠的副作用，不应作为解决方案。
✅ 推荐实践：用 CSS padding + 100% 实现等效效果
核心思路是将“减去固定像素”的逻辑从 SVG 属性层上移至 CSS 布局层，利用 box-sizing: border-box 确保内边距不扩大元素总尺寸：
#my-div {
width: 200px;
height: 500px;
background-color: red;
position: relative;
}
svg {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-right: 20px; /* 关键：预留右侧空白 */
}此时，
⚠️ 注意事项：
- 避免混用 px 与 % 单位在 SVG 属性中（如 y2="50px"），否则可能破坏比例一致性；建议统一使用 px（绝对）或 %（相对），并在 CSS 层统一控制缩放逻辑；
- 若需更复杂布局（如多边留白、动态偏移），可结合 transform: translateX() 或
容器组进行精细化控制； - 对于必须动态生成坐标的场景（如数据可视化），优先采用 JS 计算后显式设置属性值，并监听 ResizeObserver，而非依赖 calc()。
该方案彻底规避了浏览器对 SVG 属性中 calc() 的支持差异，兼具简洁性、可维护性与 100% 的跨浏览器兼容性。
