这是来自 Paul Rouget 的另一个演示。它非常简单地展示了将视频、SVG 和一些有趣的转换结合起来可以实现的功能。

在 Firefox 3.5 中查看演示

这将一个基于 HTML5 的 <video> 元素放入 SVG 文档中，如下所示

如果您查看其余的源代码，您还会发现播放器的其余部分也在 SVG 中定义和控制。我们还在使用一些 Firefox 3.5 中的 CSS 和 SVG 功能 来定义播放器。例如，如果您查看 CSS，您将看到

#video {
    filter: url(#filter);
    clip-path: url(#circle);
}

<a href="https://mdn.org.cn/En/Applying_SVG_effects_to_HTML_content#Example.3a.c2.a0Clipping">clip-path</a> 属性允许您为任何元素（html、svg 或其他）定义剪辑路径。这可能非常强大，并且可以是 SVG 中定义的任何任意路径。就像饼干切割器一样，它剪掉原本是方形视频的中心，并将其用于显示。以下是我们的剪辑路径的样子

<a href="https://mdn.org.cn/En/Applying_SVG_effects_to_HTML_content#Example.3a.c2.a0Filtering">filter</a> 属性允许您定义 SVG 滤镜，其使用方法与剪辑路径相同。在我们的例子中，我们使用 feColorMatrix

虽然在此演示中未使用，但请注意，您也可以使用 SVG 为 Firefox 3.5 中的任何元素定义渐变蒙版。

视频运行时，它使用 转换 属性在播放时旋转视频

function rotateMePlease() {
    // Sure
    if (!video) return;
    video.style.MozTransform='rotate(' + i + 'deg)';
    i += 3;
}

您会注意到 Paul 将其构建到 XHTML 文档中，仔细使用命名空间和 XML 语法。但是大多数人可能希望在普通的 HTML 中使用 SVG。在 Firefox 3.5 中，可以使用 SVG 外部文档引用 来实现这一点。这意味着，您可以将 SVG 定义在其自己的文件中，而不是直接在 HTML 文件中定义它，并通过 CSS 引用它，如下所示

.target { clip-path: url(resources.svg#c1); }

这将从 resources.svg 文件加载 SVG，然后使用 ID 为“c1”的对象作为目标的剪辑路径。这是一种非常简单的方法，可以在不完全切换到 XHTML 的情况下将 SVG 添加到您的文档中。

我希望这能让你对混合使用 SVG、HTML、视频和 CSS 的可能性有所了解。尽情享受吧！