SVG内联style必须作为<svg>的直接子元素且位于所有图形元素之前，需用CDATA包裹并声明type="text/css"，否则浏览器会忽略；class选择器可用但须防命名冲突，优先级高于外部CSS。
SVG内联style为什么不能直接写在<svg>标签里
直接把style标签塞进<svg>开头位置（比如<svg><style>...</style>...</svg>）看似合理，但多数浏览器会忽略它——SVG规范要求<style>必须作为<svg>的**子元素且位于图形元素之前**，但更关键的是：它只对同级及后代SVG元素生效，且需声明type="text/css"（虽然现代浏览器常宽容省略）。不满足结构或作用域时，样式根本不会应用到<path>、<circle>等上。
正确嵌套<style>的位置和写法
必须把<style>放在<svg>内部、所有图形元素之前，并用CDATA包裹CSS内容（尤其含<、>时），避免XML解析错误。常见错误是漏掉<![CDATA[...]]>或把<style>放在<path>后面。
<svg viewBox="0 0 24 24"><style type="text/css"><![CDATA[ .icon-fill { fill: #333; } .icon-stroke { stroke: #666; stroke-width: 2; } ]]></style><path class="icon-fill" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-5.18 3.25L8.6 14.14 3.41 9.27l6.91-1.01L12 2z"/></svg>
class选择器在SVG内联style中能用吗
能，但要注意命名冲突和作用域隔离。SVG内的class只影响该<svg>内部元素，不会污染全局CSS。不过若图标被多次复用（如通过<use>引用），class仍有效；但若外部CSS也定义了同名class，内联<style>优先级更高（同层CSS规则中，后定义者覆盖先定义者，而内联<style>属于文档流内定义，通常比外部样式表优先）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 类名加前缀（如
.svg-icon-fill），避免和项目其他class意外匹配 - 避免用ID选择器（
#xxx），因为ID在页面中必须唯一，多个相同SVG副本会导致ID重复 - 不要依赖
:hover等伪类——除非SVG是独立文件或显式启用交互（pointer-events: visible）
为什么用内联<style>而不是style属性
style属性只能写行内样式（如fill="#333"），无法复用、无法响应式、无法写媒体查询。而<style>块支持完整CSS能力：@media、:is()、变量（--color）、甚至CSS动画。例如：
<style type="text/css"><![CDATA[
@media (prefers-color-scheme: dark) {
.icon-fill { fill: #eee; }
}
.icon-spin { animation: spin 1s infinite linear; }
@keyframes spin { to { transform: rotate(360deg); } }
]]></style>
但注意：SVG内transform动画需配合<g>容器，且rotate()默认绕原点，不是视觉中心——容易动偏，得手动算transform-origin或用viewBox中心对齐。
真正麻烦的是<style>块里的CSS变量没法被JS动态改——它不像HTML中document.documentElement.style.setProperty()那样生效。如果需要运行时换色，还是得走setAttribute('fill', ...)或CSS-in-JS注入新<style>块。
