内联SVG中fill和stroke被忽略，根本原因是浏览器优先采用内联属性（如fill="red"）而非CSS类声明；需移除内联fill/stroke属性，仅用class并在CSS中定义:hover等动态样式，同时确保viewBox存在以维持缩放正确性。
SVG内联后样式不生效，为什么fill和stroke被忽略了？
直接把SVG代码粘进HTML里，看似能用，但常发现颜色、大小或hover效果没反应——根本原因是内联SVG的CSS作用域受父级样式和自身style属性优先级影响。浏览器会优先采用fill、stroke等内联属性（attribute），而非CSS类里的声明。
- 把颜色控制从
style="fill: red"改成fill="red"属性写法，更可靠 - 若需CSS动态控制（比如hover变色），必须移除
fill等原生属性，只留class，再在CSS中用.icon:hover path { fill: blue; } - 注意
<svg>标签默认display: inline，垂直对齐可能错位，建议加vertical-align: middle或设为block
用<svg>标签嵌入时，宽高怎么设才不拉伸变形？
SVG本身有viewBox，这是关键。没有它，仅靠width/height会导致压缩或裁剪；设了viewBox后，尺寸才真正“响应式”。
- 必须保留原始SVG中的
viewBox属性（如viewBox="0 0 24 24"），不能删 -
width和height可设为1em、100%或具体像素，只要viewBox存在，就不会失真 - 避免同时设
width、height和preserveAspectRatio="none"，否则强制拉伸
<svg viewBox="0 0 24 24" width="1.5em" height="1.5em"> <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/> </svg>
内联SVG里的<use>引用外部symbol失效，怎么修？
很多人想复用图标，把<symbol>定义在<svg>外（比如<defs>里），再用<use href="#icon-home">调用——但内联时，href指向的是当前文档内的ID，跨文件或跨<svg>块无效。
- 所有
<symbol>必须放在同一个<svg>内的<defs>里，且<use>与<symbol>同属一个<svg>上下文 - 如果要用全局symbol库，得把整个
<svg>（含<defs>）放在页面顶部隐藏（display: none），再在各处用<use href="#icon-home"> -
href在部分旧版IE中不支持，可改用xlink:href（需声明xmlns:xlink）
React/Vue里直接写SVG标签，为什么热更新后图标消失？
框架编译或JSX解析时，可能把<svg>当普通HTML处理，忽略命名空间或自动转义<path>等子元素。
- React中确保使用小写
svg、path等标签名（JSX对大小写敏感），不要写成Svg - Vue模板里若用
v-html插入SVG字符串，必须确保字符串已正确转义，且包含完整xmlns（xmlns="http://www.w3.org/2000/svg"） - 最稳妥做法：把SVG封装为组件，每个图标一个
.jsx或.vue文件，避免字符串拼接
viewBox、属性优先级、ID作用域这三点漏掉任何一个，都可能让图显示异常或交互失效。 
