SVG元素不支持margin、padding、background-color等盒模型属性，因其不属于CSS盒模型范畴，无content-box等概念；应改用transform、cx/cy或<rect>垫底等原生机制控制间距与背景。
SVG 元素不支持 margin、padding、background-color 等盒模型属性，不是 CSS 写错了，而是它根本就不是盒模型元素。
为什么 margin/padding/background-color 对 <svg> 完全无效
SVG 图形（如 <circle>、<path>、<rect>）不属于 CSS 盒模型范畴——它们没有 content-box、padding-box 或 border-box 概念。浏览器不会为这些元素生成布局盒，因此：
-
margin-top和margin-bottom不会推开相邻元素，只可能触发重绘但无布局影响 -
padding设了也看不见，更不会撑开容器 -
background-color在<svg>标签上设置，只会作用于 SVG 的“透明画布区域”，但若没设width/height或 viewBox 未对齐，常表现为“看不见”或“只染一小块”
想控制 SVG 间距或“背景”，该用什么替代方案
不能靠盒模型，就得回归 SVG 原生机制或包裹层干预：
- 控制图形间距离：改
cx/cy（对<circle>）、x/y（对<rect>），或统一用transform: translate(x, y) - 模拟“内边距”：在
<svg>内部加一层<g transform="translate(10,10)">包裹所有内容 - 要“背景色”：别设在
<svg>上，而是用<rect x="0" y="0" width="100%" height="100%" fill="#eee"/>垫底，或给外层<div>加background-color - 想让 SVG 响应式占满容器又不失比例：必须同时有
viewBox（如viewBox="0 0 24 24"）和preserveAspectRatio="xMidYMid meet"
为什么 display: inline-block 后 width/height 有时仍不生效
即使把 <svg> 改成 display: inline-block，width 和 height 也可能被忽略，常见原因：
立即学习“前端免费学习笔记（深入）”；
-
viewBox缺失或格式错误（如viewBox="10 10 24 24"带偏移），导致缩放锚点丢失，CSS 尺寸失去参照 - 父容器是 Flex/Grid，且未设
flex-shrink: 0或min-width，SVG 被压缩（注意：flex-shrink: 0必须加在 SVG 的直接父 wrapper 上，而非 SVG 自身） - 用了
max-width: 100%+height: auto组合，破坏了宽高比约束，居中和尺寸都会漂移 - 浏览器计算时优先采用
viewBox推导的固有宽高，CSSwidth/height只作为“最大可用尺寸”参与约束，非强制覆盖
真正卡住的地方往往不在 CSS 属性本身，而在 viewBox 是否干净、是否脱离文档流、以及有没有意识到 SVG 的“画布”和“内容”是两层概念——改错一层，另一层还在悄悄偏移。
