可以在 svg 中嵌入 youtube 视频吗？

Posted 2023-03-13

【中文标题】可以在 svg 中嵌入 youtube 视频吗？

【英文标题】：Possible to embed a youtube video in an svg?

【发布时间】：2011-09-02 07:32:26

【问题描述】：

Sozi 是一个 inkscape 扩展程序，当在支持 svg 的网络浏览器中查看时，它允许像 Prezi 一样平移/缩放 svg 文件。 youtube 视频可以嵌入 Prezi，我希望能够在 svg 中嵌入 youtube 视频（或任何类型的视频）。我知道可以在 svg 文档中创建 html 链接（并且 inkscape 直接支持这一点）。有没有办法将视频（通过 iframe 或视频标签？）嵌入到 svg 中？

【参考方案1】：

<foreignObject  >
  <iframe xmlns="http://www.w3.org/1999/xhtml"
     
    src="http://www.youtube.com/embed/YOUR-MOVIE-ID"
    frameborder="0"></iframe>
</foreignObject>

这应该可以解决问题。请注意，xmlns 属性保留在 iframe 元素上。 foreignObject 是 explained here。

【讨论】：

刚刚在 Chrome 15.0 中使用 SVG 进行了尝试：它可以工作。但前提是带有视频的 iframe 未旋转 (<g transform=...>)。此外，如果有多个<foreignObject> 带视频，则只显示第一个。

这可能是因为foreignObjects在原点是一个重叠的，如果它们的x和y属性没有设置的话。

请注意任何偶然发现此答案的人，foreignObject 仅在 Firefox 中完全支持 caniuse.com/#search=foreignObject

嗯，我认为您误读了该页面。 foreignObject 仅在 IE11 及更低版本中不受支持。 caniuse 显示的功能是“HTML 的 SVG 效果”。