box-sizing属性对SVG基础图形元素（如、、）完全无效，因其不属CSS盒模型，尺寸由原生属性直接控制，无padding/border概念；仅根元素及HTML包裹容器适用box-sizing。
box-sizing 对 SVG 元素完全无效
直接说结论：box-sizing 属性对所有 SVG 基础图形元素（如 <rect></rect>、<circle></circle>、<path></path>、<ellipse></ellipse>）不起作用。它们的尺寸始终按 content-box 逻辑计算，且无法通过 CSS 覆盖。
为什么 SVG 元素不支持 box-sizing？
SVG 是基于坐标系和几何属性的矢量绘图规范，其宽高由原生属性（如 width、height、r、cx/cy）直接控制，不是 CSS 盒模型的一部分：
-
<rect width="100" height="50" x="0" y="0"></rect>的实际渲染尺寸就是 100×50，无论有没有padding或border - SVG 元素没有
padding、border概念（stroke是描边，不是 border；stroke-width不参与盒尺寸计算） -
getComputedStyle(el).boxSizing在 SVG 图形上返回"content-box"，但该值只是“摆设”，不会改变任何行为
哪些 SVG 相关元素能用 box-sizing？
只有包裹 SVG 的 HTML 容器或 <svg></svg> 根元素本身受 box-sizing 影响——前提是它被当作块级 HTML 元素渲染（即有显式 display: block 或默认块行为）：
-
<svg></svg>标签本身：可设box-sizing: border-box，影响其width/height是否包含自身border和padding - 外层
<div> 包裹 SVG：完全适用，和普通 div 无异 <li>内联 SVG 中的 <code><g></g>、<symbol></symbol>、<defs></defs>等容器元素：不支持box-sizing - 用
viewBox定义内部坐标系范围，配合preserveAspectRatio控制缩放对齐 - 给
<svg></svg>加padding+box-sizing: border-box可控制 SVG 根元素自身边框内留白，但不影响内部图形 - 需要“视觉上留边”时，手动调整
viewBox值（例如从"0 0 100 100"改为"-10 -10 120 120"） - 避免在 SVG 图形上写
width/height同时又加 CSSpadding，这种组合毫无意义
想控制 SVG 内部“留白”或“缩放边界”怎么办？
不能靠 box-sizing，得用 SVG 原生机制：
立即学习“前端免费学习笔记（深入）”；
<circle r="20"></circle> 加了 padding: 10px 就能扩大“点击热区”，其实它既不生效，也不触发 layout；正确做法是用 <g></g> 包裹后加 transform，或用 pointer-events: visiblePainted 配合扩大 stroke-width。
