svg图形不支持css盒模型属性，需用transform或原生属性控制间距；外部引入svg无法被css选择器命中，必须内联或用/；fill/stroke等属性全小写且大小写敏感；css动画仅支持fill、stroke等有限属性，不支持cx、cy等几何属性。
SVG元素不支持盒模型属性
CSS的margin、padding、background-color对circle、path等SVG图形完全无效——它们不是块级或行内盒，没有盒模型概念。想控制图形间距，得用transform或调整cx/cy等原生属性；想“背景色”，只能靠外层容器或rect垫底。
外部引入的SVG无法被CSS选择器命中
<img src="icon.svg">或background-image: url(icon.svg)加载的SVG，其内部结构不在当前DOM中，.icon path这类选择器永远查不到元素。常见错误现象是写了.icon:hover path { fill: red; }却毫无反应——根本没匹配到任何节点。
实操建议：
- 必须用内联SVG：
<svg><path d="..."></path></svg>直接写进HTML - 若需复用，改用
<symbol></symbol>定义 +<use></use>引用，并确保<use></use>包裹在可样式化的<svg></svg>里 - 避免把设计师给的SVG源码直接丢进
<img>标签
fill/stroke等属性名大小写敏感且不兼容HTML习惯
SVG中fill、stroke、stroke-width全小写，且不接受background或color（<text></text>也认fill，不是color）。写成.node { background: red; }或color: blue对图形无效。
容易踩的坑：
- 内联
style="fill: blue"会覆盖外部CSS，优先级更高 - 用了
fill-opacity但忘了fill本身设为非none，结果透明度再高也看不见 -
<g></g>上设fill不会自动继承给子path，除非子元素没声明自己的fill
伪类和动画支持有限，尤其在旧浏览器中
:hover、:focus在内联SVG中基本可用，但:active响应可能延迟，:focus还需配合tabindex才生效。SMIL动画（如<set></set>）已被主流浏览器弃用，CSS动画仅支持部分属性：
- 支持：
fill、stroke、opacity、transform、filter - 不支持：
cx、cy、r、d等几何属性的CSS动画（得用JavaScript或<animate></animate>） - IE和旧版Safari对
stroke-dashoffset动画有渲染抖动
真正麻烦的不是语法写不对，而是你以为它能动，结果在某个安卓WebView里静止不动——SVG样式控制的边界，往往藏在浏览器实现差异里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
