能否通过SVG在<img>标签内嵌入并播放视频？

你无法通过<img>标签加载包含<foreignObject>和<video>的SVG来实现视频播放，这是浏览器对静态资源的渲染限制导致的。

核心原因 #

• 当SVG作为<img>的src被加载时，浏览器将其归类为静态图形资源，会自动禁用SVG内部的动态交互、脚本执行以及媒体播放功能，包括<foreignObject>中嵌入的HTML <video>元素的播放能力。
• 单独打开SVG文件时，浏览器将其作为独立的可交互文档解析，允许执行动态内容，因此视频能正常播放；但作为<img>资源时，浏览器启用了资源隔离策略，仅渲染静态图形内容，忽略所有需要动态执行的逻辑。

限制规则的查阅渠道 #

• MDN的「SVG作为图像使用」相关文档明确说明：当SVG被用作图像（如<img>、CSS背景图）时，脚本、外部资源引用、<foreignObject>的完整功能、媒体元素播放等特性会被禁用。
• W3C的SVG规范中定义了「静态上下文」的概念，SVG在此上下文下仅支持静态渲染，不支持交互式或动态媒体内容。

可行替代（若限制可放宽） #

如果允许使用<img>以外的标签，直接使用<video>标签嵌入视频是最标准的方案；但如果严格限制只能设置<img>的src，则没有可行的解决办法。

内容的提问来源于stack exchange，提问作者lxhom