在现代网页设计中，svg（可伸缩矢量图形）因其轻量级和高分辨率特性而广受欢迎。然而，当尝试在 svg 内部嵌入视频时，开发者可能会遇到一些挑战，例如视频无法正常显示、播放控件缺失以及难以实现响应式布局。本文将深入探讨这些问题，并提供一套完整的解决方案。
1. 理解 <foreignObject> 的关键作用与尺寸设置
SVG 允许通过 <foreignObject> 元素嵌入非 SVG 命名空间的内容，例如 HTML 元素。视频元素 <video> 便是其中一种。然而，初学者常犯的一个错误是未给 <foreignObject> 明确指定尺寸，导致其内部的视频内容无法渲染或显示异常。
核心要点： 与其他 SVG 元素类似，<foreignObject> 必须拥有 width 和 height 属性才能正确占据空间并显示其内容。同时，为了精确定位，x 和 y 属性也应被设置。
以下是一个基本的、正确的 SVG 视频嵌入示例：
<svg viewBox="0 0 340 200" xmlns="http://www.w3.org/2000/svg">
<rect id="Background" width="340" height="200" fill="gray" />
<foreignObject width="320" height="180" x="10" y="10">
<video xmlns="http://www.w3.org/1999/xhtml" width="320" height="180" controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
</video>
</foreignObject>
<rect width="340" height="100" y="100" fill="black" opacity=".3" pointer-events="none" />
</svg>代码解析：
- <foreignObject width="320" height="180" x="10" y="10">：明确定义了 <foreignObject> 的宽度、高度以及相对于 SVG 视口的位置。这是视频能够显示的关键。
- <video xmlns="http://www.w3.org/1999/xhtml" ...>：确保 <video> 元素处于正确的 XHTML 命名空间下。
- <video ... controls>：添加 controls 属性以启用浏览器原生的视频播放控件。
2. 正确使用 controls 属性实现播放控制
在 XML 环境下（SVG 文件本身就是 XML），属性的赋值规范与纯 HTML 略有不同。直接使用 controls 而不带值在某些严格的 XML 解析器中可能会引发错误，导致 SVG 渲染失败。
解决方案： 确保 controls 属性具有一个值。最常见且兼容性最好的做法是使用 controls="" 或 controls="controls"。
<video xmlns="http://www.w3.org/1999/xhtml" width="320" height="180" controls=""> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/> </video>
上述代码片段中的 controls="" 能够确保在 XML 环境下属性的有效性，并成功显示视频播放控件。
3. 实现 SVG 视频的响应式布局
直接在 SVG 内部使用 vw 或 em 单位来控制 <foreignObject> 或 <video> 的尺寸通常无法达到预期的响应式效果，甚至可能导致视频不显示。实现 SVG 内部视频的响应式布局，更有效的方法是将 SVG 作为外部资源嵌入到 HTML 页面中，并通过外部 CSS 对 SVG 容器进行响应式控制。
这种方法允许我们利用 HTML 和 CSS 强大的响应式特性来管理 SVG 及其内部内容的尺寸。
步骤一：创建独立的 SVG 文件 (video.svg)
将包含视频的 SVG 内容保存为一个独立的 .svg 文件。在这个 SVG 文件内部，你可以为背景等元素定义一些响应式样式，以观察外部 HTML 容器变化时 SVG 内部的样式反馈。
video.svg
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 340 200" xmlns="http://www.w3.org/2000/svg">
<style>
.background {
fill: gray;
}
@media (min-width: 300px) {
.background {
fill: orange; /* 当视口宽度大于300px时，SVG内部的背景变为橙色 */
}
}
</style>
<rect class="background" width="340" height="200" fill="gray" />
<foreignObject width="320" height="180" x="10" y="10">
<video xmlns="http://www.w3.org/1999/xhtml" width="320"
height="180" controls="">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
</video>
</foreignObject>
<rect width="340" height="100" y="100" fill="black"
opacity=".3" pointer-events="none" />
</svg>步骤二：在 HTML 页面中嵌入 SVG 并应用响应式样式
使用 <object> 标签将 video.svg 文件嵌入到 HTML 页面中。然后，通过外部 CSS 为 <object> 元素定义响应式样式。
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG 视频响应式嵌入</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.video-container {
width: 90%; /* 默认宽度为父容器的90% */
max-width: 600px; /* 最大宽度限制 */
border: 2px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.video {
width: 100%; /* SVG 容器宽度占满父容器 */
height: auto; /* 高度自适应，保持比例 */
display: block; /* 移除可能的底部空白 */
}
@media (min-width: 400px) {
.video-container {
width: 400px; /* 当视口宽度大于400px时，容器宽度固定为400px */
}
}
@media (min-width: 768px) {
.video-container {
width: 600px; /* 进一步增大容器宽度 */
}
}
</style>
</head>
<body>
<div class="video-container">
<object class="video" type="image/svg+xml" data="video.svg"></object>
</div>
</body>
</html>代码解析：
- <object class="video" type="image/svg+xml" data="video.svg"></object>：这是将 SVG 文件作为独立文档嵌入 HTML 的标准方式。
- .video { width: 100%; height: auto; }：确保 SVG 元素在其父容器内完全响应。height: auto 结合 SVG 自身的 viewBox 属性，能保持正确的宽高比。
- @media (min-width: 400px) { .video-container { width: 400px; } }：通过媒体查询，根据视口宽度调整 SVG 容器的尺寸，从而间接实现 SVG 内部视频的响应式缩放。
这种方法利用了浏览器渲染 SVG 文件的能力，并允许外部 CSS 对整个 SVG 容器进行布局和尺寸控制，从而优雅地解决了 SVG 内部视频的响应式问题。
总结与注意事项
在 SVG 中嵌入视频是一个强大但需要注意细节的功能。以下是关键的总结和建议：
- foreignObject 尺寸至关重要： 务必为 <foreignObject> 元素设置明确的 width、height、x 和 y 属性，以确保视频能够正确渲染和定位。
- controls 属性的 XML 规范： 在 SVG（XML）环境中，controls 属性应使用 controls="" 或 controls="controls" 的形式，以避免解析错误并确保播放控件的显示。
- 响应式布局的最佳实践： 对于 SVG 内部视频的响应式设计，最可靠的方法是将 SVG 作为外部文件通过 <object> 标签嵌入到 HTML 页面中，然后利用 HTML/CSS 的媒体查询来控制 SVG 容器的尺寸，而不是尝试在 SVG 内部直接使用 vw/em 单位。
- 命名空间： 确保 <video> 元素及其子元素（如 <source>) 位于正确的 XHTML 命名空间 (xmlns="http://www.w3.org/1999/xhtml") 下。
- 视频源： 确保视频源路径正确且可访问，并提供不同格式的视频源以增强兼容性。
遵循这些指导原则，您将能够成功地在 SVG 中嵌入视频，并实现其响应式显示和完整的播放控制功能。
