内嵌SVG最可控，需保留svg根标签及viewBox属性，删xml声明和xmlns；CSS控制时应清除内联样式，用class选择器；use引用须用href且defs与symbol位置正确；JS修改优先用setAttribute。
直接用 <svg> 标签内嵌是最可控的方式
内嵌 SVG 能直接操作 DOM，修改颜色、尺寸、动画都无需额外请求或绕过跨域限制。外部引用（<img src="icon.svg">）或 <object> 会隔离样式和脚本，基本无法用 CSS 控制内部 <path> 或响应点击事件。
- 把 SVG 代码原样复制进 HTML，放在
<body>或任意容器内（注意不要破坏 HTML 结构） - 移除 SVG 源文件里的
<?xml>声明和<!DOCTYPE>—— 这些在 HTML 中会导致解析错误 - 保留
<svg>根标签及其width、height、viewBox属性；其中viewBox是缩放关键，删了可能导致拉伸变形 - 如果原 SVG 有
xmlns属性（如xmlns="http://www.w3.org/2000/svg"），在 HTML5 中可省略 —— 浏览器默认识别
用 CSS 控制 SVG 内部元素要加 fill 和 stroke 的 !important 吗？
不一定，但得看 SVG 里有没有内联样式。内联 fill="red" 的优先级高于外部 CSS，此时必须用 !important 覆盖，或者干脆删掉内联属性。
- 推荐做法：清理 SVG 源码，删掉所有
fill、stroke、style等内联属性，统一交给 CSS 管理 - CSS 选择器要写对：比如
svg .icon-path { fill: #333; }，其中.icon-path是你给<path>加的 class，不是直接写svg path—— 后者容易被其他 SVG 干扰 - 不能用
color继承控制fill，除非 SVG 元素显式写了fill="currentColor"
<use> 引用图标时为什么不显示或错位？
常见原因是 <defs> 位置不对、<symbol> 缺少 id，或 <use> 的 xlink:href 在现代浏览器已废弃。
- 确保所有
<symbol>都包在<defs>里，且每个都有唯一id，例如<symbol id="arrow-right"> -
<use>必须用href（不是xlink:href），写成<use href="#arrow-right">；旧写法在 Chrome 80+、Firefox 73+ 已失效 -
<symbol>自带viewBox，但<use>不继承宽高，需手动设width和height，否则可能不可见 - 避免把
<defs>放在<svg>外面 —— 它只对同级或子级<use>有效
动态修改 SVG 属性时，setAttribute 和 style.fill 哪个更可靠？
操作颜色、描边等样式属性，优先用 setAttribute('fill', '#00f')；改尺寸或坐标类属性（如 x、cx），必须用 setAttribute —— style 对象不支持这些属性。
立即学习“前端免费学习笔记（深入）”；
-
element.style.fill = 'red'实际无效，因为fill不是 CSS 样式属性，而是 SVG 呈现属性 - 批量改多个属性时，用
setAttributeNS(null, 'fill', ...)更稳妥，尤其涉及命名空间（如xml:space）时 - 动画场景下，用
transform属性比直接改x/y更高效，例如el.setAttribute('transform', 'translate(10,20)')
真正麻烦的是混合使用内联样式、CSS 类、JS 修改，三者优先级容易打架；建议选一种方式贯穿到底，SVG 本身足够轻量，没必要过度抽象。
