javascript - SVG 可以包含使用 javascript 的音频吗？

Question

我有一个带有一些基本 javascript 交互性的 SVG，我也希望能够将一些音频放入其中。

澄清：

• 这适用于本身的 SVG，而不是在 HTML 中内联
• 我宁愿避免使用 javascript 库，但如果有必要我可以。

关于如何实现这一点的任何见解？

Answer 1

SVG 1.2 Tiny 中定义了SVG<audio>和<video>元素标签。Opera 支持它们，但目前还没有其他 UA 支持。

除了 IE 9/10 之外，适用于大多数地方的解决方案是使用<foreignObject>带有 html<audio>元素的元素作为子元素。

如果您需要 IE9/10 支持，我认为没有一个好的答案，因为它不支持<foreignObject>

Answer 2

如果您需要一个支持 HTML5 音频的浏览器，那么可以只将音频元素放在 svg 中（对音频元素及其子元素使用 XHTML 命名空间）。上次我尝试它不需要 foreignObject 包装器。这是一个展示如何做到这一点的示例（适用于 chrome、firefox 和 opera）。

也可以使用 javascript 创建 HTML5 音频元素并在 SVG 中使用它们。