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

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

在现代网页开发中，HTML5 的 <video> 元素与 SVG（可缩放矢量图形）以及 Canvas 的结合为开发者带来了丰富的创意和交互可能性。下面将深入探讨它们之间的协作方式以及相关的技术细节。

SVG 与 HTML5 <video> 的交互

SVG 作为一种基于 XML 的图形格式，能够与 HTML5 的 <video> 元素进行多种形式的交互。

1. SVG 作为遮罩

在不同浏览器中，使用 SVG 对象作为 <video> 元素的遮罩有不同的实现方式：
- Safari ：可以在 -webkit-mask CSS 属性中引用外部 SVG “图像”。
- Firefox ：支持使用 mask CSS 属性直接引用 SVG “图像” 内的 <mask> 元素，不过这种使用 URI 片段的方式尚未标准化。同时，Firefox 还能通过片段寻址方式引用内联定义的 SVG 遮罩。
- IE 和 Chrome ：虽然支持在 HTML 中内联定义 <svg> 元素，但由于不支持 mask CSS 属性内的片段寻址方式，无法将其用于 HT