标签无法实现svg动画，因其子元素均退化为位图快照，导致dom不可见、css无法穿透、js无法控制内部元素；唯一可靠方案是改用内联svg，并将颜色定义于css类中、统一格式、配合viewbox实现响应式。
<picture></picture> 标签本身不支持 SVG 动画，也无法与 SVG 内部元素建立样式或 JS 控制链——它只是响应式图片的容器，最终渲染的仍是 <img> 行为。
为什么 <picture></picture> + SVG 无法做过渡动画
根本原因是：<picture></picture> 的所有子元素（<source></source>、<img>）在浏览器中都退化为位图快照。即使源文件是 SVG，一旦通过 <img> 加载，DOM 就不可见、CSS 无法穿透、JS 无法查询 <path></path> 或设置 fill 过渡。
- 你写
<source srcset="logo.svg" type="image/svg+xml"></source>，浏览器仍按“外部图像”处理，等同于<img src="logo.svg"> -
filter: grayscale(0%)可能生效（因为作用于整个 img 元素），但 fill/stroke/color 等 SVG 原生属性完全不可控 - 任何基于 class 切换、hover、
@keyframes对 SVG 内部元素的动画都会静默失败
想让 SVG 动起来，必须内联
唯一可靠路径是放弃 <picture></picture>，改用内联 SVG（<svg>...</svg>），并确保：
- 颜色定义在 CSS class 中（如
.icon { fill: #3498db; transition: fill 0.3s ease; }），而非 SVG 标签内写fill="red"或style="fill: red" - 所有颜色值格式统一：全用
#rrggbb，或全用hsl()，避免rgb()混#fff导致插值中断 - 需要路径绘制动画时，用
stroke-dasharray+stroke-dashoffset，且必须先调用el.getTotalLength()获取真实长度，不能硬编码
响应式需求怎么解决？
如果原本用 <picture></picture> 是为了适配不同 DPR 或尺寸（比如 1x/2x SVG），可改用以下方式保响应性又不失控制力：
- 用
<svg></svg>+viewBox+ CSSwidth/height（如width: 100%; max-width: 200px;），天然响应 - 需要多版本 SVG（如深色模式变色），用
@media (prefers-color-scheme: dark)切换 CSS class，再由 class 控制fill - 若真要 fallback 到 PNG（比如兼容 IE11），可用
<object data="icon.svg" type="image/svg+xml"><img src="icon.png"></object>，但注意<object></object>内 SVG 仍可被 CSS 选中（比<img>强）
真正卡住动画的从来不是语法，而是加载方式——只要 SVG 被当作“图”而不是“DOM”，所有过渡、交互、JS 控制就自动失效。内联不是妥协，是必要前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
