本文旨在解决在 CSS 中 SVG 动画上叠加内容，并实现 SVG 动画自适应屏幕宽度的问题。通过结合绝对定位和 Grid 布局两种方法，详细讲解如何在 SVG 上灵活叠加内容，并提供 SVG 缩放以适应容器的解决方案，确保动画内容不被拉伸变形。
在 SVG 动画上叠加内容
在网页设计中，我们经常需要在 SVG 动画上叠加其他 HTML 元素，例如文本、图片或按钮。以下介绍两种常用的方法：
方法一：绝对定位
绝对定位是一种传统但有效的方法，通过设置父元素的 position: relative 和子元素的 position: absolute，可以将子元素放置在父元素的任意位置。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
position: relative;
width: 200px;
height: 150px;
}
.child-one {
display: block; /* 确保 SVG 作为块级元素显示 */
}
.child-two {
position: absolute;
top: 0;
left: 0; /* 可根据需要调整位置 */
width: 100%; /* 占据父元素宽度 */
height: 100%; /* 占据父元素高度 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center; /* 文本居中 */
}<div class="parent">
<svg class="child-one" width="200" height="150">
<rect x="0" y="0" width="200" height="150" fill="linen"/>
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
<div class="child-two">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>代码解释：
- .parent: 设置为相对定位，作为子元素的定位参考。
- .child-one: 确保 SVG 作为块级元素显示，以便绝对定位的子元素可以正确覆盖。
- .child-two: 设置为绝对定位，top: 0 和 left: 0 使其位于父元素的左上角。width: 100% 和 height: 100% 使其占据整个父元素区域。display: flex，justify-content: center，align-items: center，text-align: center 用于将文本内容在叠加层中居中显示。
方法二：Grid 布局
Grid 布局是一种更现代的方法，它允许我们将元素放置在网格的特定单元格中。通过将多个元素放置在同一个单元格中，可以实现叠加效果。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 150px;
}
.child-one, .child-two {
grid-column: 1 / 1;
grid-row: 1 / 1;
}<div class="parent">
<svg class="child-one" width="200" height="150">
<rect x="0" y="0" width="200" height="150" fill="linen"/>
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
<div class="child-two">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>代码解释：
- .parent: 设置为 display: grid，创建一个网格容器。grid-template-columns 和 grid-template-rows 定义了网格的列和行。
- .child-one 和 .child-two: grid-column: 1 / 1 和 grid-row: 1 / 1 将两个元素放置在网格的第一个单元格中，从而实现叠加效果。
SVG 缩放以适应容器
为了使 SVG 动画能够自适应屏幕宽度，同时保持动画内容的比例，可以使用以下技巧：
- 移除 width 和 height 属性： 从 SVG 标签中移除 width 和 height 属性。
- 设置 viewBox 属性： 确保 viewBox 属性已正确设置，它定义了 SVG 内容的坐标系统。
- CSS 控制缩放： 使用 CSS 控制 SVG 的宽度，例如 width: 100%，使其宽度与父容器相同。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<svg viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg" style="width: 100%;">
</svg>注意事项：
- preserveAspectRatio 属性控制 SVG 如何在容器中缩放。默认值为 xMidYMid meet，它会保持 SVG 的宽高比，并在容器中居中显示。如果需要 SVG 填充整个容器，可以使用 preserveAspectRatio="none"，但这可能会导致 SVG 内容被拉伸变形。
- 如果需要更精细的控制，可以参考 How to make SVG "fill" act in a similar way to CSS "background-size: cover" 了解更多高级技巧。
总结：
通过结合绝对定位或 Grid 布局，以及正确的 SVG 缩放技巧，可以轻松地在 SVG 动画上叠加内容，并实现自适应屏幕宽度的效果，从而创建更具吸引力和响应式的网页设计。
