SVG元素（如、、）不支持box-sizing、margin、padding、background-color等CSS盒模型属性；控制其尺寸与间距须使用cx/cy/r、x/y/width/height等原生属性或transform，而非盒模型逻辑。
SVG 元素（如 <circle></circle>、<rect></rect>、<path></path>）**不支持 box-sizing，也不响应 margin、padding、background-color 等盒模型样式**——这是根本前提。想用 CSS 控制它们的“尺寸”，必须换思路。
为什么给 <circle></circle> 加 padding: 10px 完全没反应？
因为 SVG 原生图形不是 HTML 盒子，没有 content/padding/border/margin 概念。浏览器直接忽略这些声明，不报错也不生效。
-
margin和padding对<circle></circle>、<path></path>等零作用，只对包裹它的<svg></svg>容器有效 -
background-color同样无效；想“背景”，得在外层加<div> 或用 <code><rect></rect>垫底 -
width/height属性只在<svg></svg>标签上起作用，对内部图形无效（图形靠cx/cy/r或x/y/width/height自身属性定位缩放） - 移动
<circle></circle>：改cx和cy，不是margin-left - 缩放
<rect></rect>：调width和height属性，不是scale()（除非你明确需要视觉缩放而非几何重绘） - 整体偏移一组图形：给
<g></g>包裹后加transform="translate(20, 10)"，比塞一堆margin更精准、无副作用 - 想“内边距效果”？在
<svg></svg>内部用viewBox留白，例如viewBox="-4 -4 32 32"而非"0 0 24 24" - 给
<svg></svg>设display: block避免行内基线对齐导致的底部空白 - 设
box-sizing: border-box是有效的，可让它正确响应width/height+padding/border - 若需 Flex/Grid 居中，
align-items: center作用对象是<svg></svg>的盒模型边界，不是图形视觉中心——务必检查viewBox是否为"0 0 W H"，否则图形会漂移 - 用
aspect-ratio替代硬写width/height，更利于响应式，例如svg { aspect-ratio: 1; width: 100%; max-width: 24px; }
如何真正控制 SVG 图形的位置与间距？
用 SVG 原生属性或 transform，而不是盒模型。
怎样让 <svg></svg> 容器本身表现得像标准 CSS 盒子？
这个可以——但仅限于 <svg></svg> 这个 HTML 元素本身，不是它里面的图形。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的关键点
很多人卡在“为什么明明写了 margin 却没空隙”，其实问题不在写法，而在对象错了——你试图给一个非盒子的东西套盒子逻辑。真正的控制粒度在两层：外层 <svg></svg> 是 HTML 元素，能走 CSS 盒模型；内层 <circle></circle> 等是 SVG 图形，只认 SVG 属性和 transform。混用这两层规则，几乎必然出视觉偏差。
