css 控制 svg 样式的核心是 fill、stroke 和 stroke-dasharray：fill 决定封闭图形填充色，默认 black，可设为 none 或 currentcolor；stroke 定义描边颜色与样式，需配合 stroke-width 等属性生效；stroke-dasharray 通过数值序列控制虚线模式，是路径动画关键；内联 svg 才支持 css 样式穿透，避免行内属性干扰，推荐用 css 变量统一配色。
用 CSS 控制 SVG 样式，核心就是 fill、stroke 和 stroke-dasharray 这三个属性。它们不是“可选技巧”，而是 SVG 渲染的底层控制开关——填什么色、描什么边、线怎么断，全靠它们定。
fill 控制图形内部颜色
fill 决定封闭图形（如 <circle></circle>、<rect></rect>、<path></path>）的填充色。它不作用于线条类元素（比如 <line></line>），也不影响描边。
- 未设置 fill 时，默认为
black；设为none表示完全透明，不绘制内部 - 推荐用
currentColor，让图标自动继承父级文字颜色，适配深色模式或主题切换更简单 - 配合
fill-opacity可单独调节填充透明度，不影响描边
stroke 定义轮廓与线条表现
stroke 负责所有可见边线的颜色和样式，但光写 stroke: red 往往看不到效果——因为默认描边宽度是 1，且没有指定单位。
- 必须搭配
stroke-width才能显形，例如stroke-width: 2px或stroke-width: 0.05em -
stroke-linecap控制线头形状：butt（平头）、round（圆头）、square（方头外延） -
stroke-linejoin管理折角连接方式，对多段路径（如<polyline></polyline>）特别重要
stroke-dasharray 实现虚线与动画逻辑
这个属性不只用来画虚线，更是 SVG 动画（如环形进度条、路径擦除）的关键杠杆。它的值是一组数字，定义“实线长度,空白长度”的循环模式。
- 单值写法如
stroke-dasharray: 10，浏览器会自动补全空白为剩余长度，但动画中不稳定，慎用 - 双值写法如
stroke-dasharray: 20,10更可控：每段实线 20px，后跟 10px 空白 - 做进度动画时，需先用 JS 调用
getTotalLength()获取真实路径长度，再设stroke-dasharray为"L L"（L 是长度），配合stroke-dashoffset从 L 减到 0
内联 SVG 是样式生效的前提
只有 SVG 代码直接写在 HTML 中（即内联 SVG），CSS 才能穿透并控制 fill/stroke。通过 <img src="icon.svg"> 或 CSS background-image 引入的 SVG，样式无法到达内部节点。
- 若必须复用外部 SVG，可用
<svg><use href="icons.svg#check"></use></svg>方式，前提是 SVG 文件里已定义好<symbol></symbol>并允许样式继承 - 避免在 SVG 源文件里写
fill="red"行内属性，它会优先级高于 CSS，导致样式失效 - 用 CSS 变量统一管理颜色，例如
fill: var(--primary-color)，方便主题一键切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
