内嵌svg最可控，需保留svg根标签及viewbox属性，删xml声明和xmlns；css控制时应清除内联样式，用class选择器；use引用须用href且defs与symbol位置正确；js修改优先用setattribute。
直接用 <svg></svg> 标签内嵌是最可控的方式
内嵌 SVG 能直接操作 DOM，修改颜色、尺寸、动画都无需额外请求或绕过跨域限制。外部引用（<img src="icon.svg">）或 <object></object> 会隔离样式和脚本，基本无法用 CSS 控制内部 <path></path> 或响应点击事件。
- 把 SVG 代码原样复制进 HTML，放在
或任意容器内（注意不要破坏 HTML 结构） - 移除 SVG 源文件里的
<?xml>声明和—— 这些在 HTML 中会导致解析错误 - 保留
<svg></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></path>加的 class，不是直接写svg path—— 后者容易被其他 SVG 干扰 - 不能用
color继承控制fill，除非 SVG 元素显式写了fill="currentColor"
<use></use> 引用图标时为什么不显示或错位？
常见原因是 <defs></defs> 位置不对、<symbol></symbol> 缺少 id，或 <use></use> 的 xlink:href 在现代浏览器已废弃。
- 确保所有
<symbol></symbol>都包在<defs></defs>里，且每个都有唯一id，例如<symbol id="arrow-right"></symbol> -
<use></use>必须用href（不是xlink:href），写成<use href="#arrow-right"></use>；旧写法在 Chrome 80+、Firefox 73+ 已失效 -
<symbol></symbol>自带viewBox，但<use></use>不继承宽高，需手动设width和height，否则可能不可见 - 避免把
<defs></defs>放在<svg></svg>外面 —— 它只对同级或子级<use></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 本身足够轻量，没必要过度抽象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
