14、HTML5 媒体与图形：SVG 与 Canvas 的深度探索

HTML5 媒体与图形：SVG 与 Canvas 的深度探索

1. HTML5 视频与 SVG 的交互

1.1 SVG 作为视频遮罩

在不同浏览器中，使用 SVG 对象作为 HTML5 <video> 元素的遮罩方式有所不同：
- Safari ：可以在 -webkit-mask CSS 属性中引用外部 SVG “图像”。
- Chrome ：曾经支持在 -webkit-mask CSS 属性中引用外部 SVG “图像”，但目前该功能已失效。
- Firefox ：可以使用 mask CSS 属性直接引用 SVG “图像” 内的 <mask> 元素的片段。不过，Firefox 对 URI 片段的支持方式尚未标准化。此外，Firefox 还能通过片段寻址方法引用内联定义的 SVG 遮罩，即同一 HTML 文件中 <svg> 元素内的 <mask> 元素也可作为遮罩。
- IE 和 Chrome ：支持在 HTML 中内联定义 <svg> 元素，但由于它们不支持 mask CSS 属性内的片段寻址方法，因此无法将其用于 HTML <video>