本文旨在解决在 CSS 中如何实现 SVG 动画背景上叠加内容和图像的问题。通过结合绝对定位和 Grid 布局两种方法，详细讲解了如何将元素堆叠在 SVG 动画之上，并提供了使 SVG 动画缩放以适应容器的解决方案，同时保持 SVG 内部元素比例不变。
元素堆叠的两种方法
在网页设计中，将一个元素放置在另一个元素之上是一种常见的需求。以下介绍两种常用的方法：使用 position: absolute 和使用 Grid 布局。
1. 使用 position: absolute
这是传统的元素堆叠方法。通过将父元素设置为 position: relative，然后将需要堆叠的子元素设置为 position: absolute，并使用 top、left、right、bottom 属性来控制子元素的位置。
.parent {
position: relative;
width: 200px;
height: 150px;
}
.child-one {
display: block;
}
.child-two {
position: absolute;
top: 0;
left: 0; /* 可选，根据需要设置 */
}<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" width="200" height="150">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>代码解释：
立即学习“前端免费学习笔记（深入）”；
- .parent：设置父元素为相对定位，作为绝对定位子元素的参考。
- .child-one：SVG 元素，作为背景。
- .child-two：需要堆叠在 SVG 之上的内容。position: absolute 将其从文档流中移除，并相对于最近的已定位祖先元素（即 .parent）进行定位。
2. 使用 Grid 布局
Grid 布局提供了一种更现代、更简洁的元素堆叠方式。通过将父元素设置为 display: grid，然后使用 grid-column 和 grid-row 属性将所有子元素放置在同一个 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" width="200" height="150">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>代码解释：
立即学习“前端免费学习笔记（深入）”；
- .parent：设置为 Grid 容器，定义了一个单列单行的 Grid。
- .child-one 和 .child-two：通过 grid-column: 1 / 1 和 grid-row: 1 / 1 将两个元素都放置在第一个 Grid 单元格中，从而实现堆叠。
SVG 缩放以填充容器，同时保持内部元素比例
要使 SVG 动画缩放以填充其容器，同时保持 SVG 内部元素的比例不变，可以使用以下方法：
- 移除 SVG 元素的 width 和 height 属性：这将允许 SVG 根据其容器的大小进行缩放。
- 设置 viewBox 属性：viewBox 属性定义了 SVG 内容的坐标系统。通过设置 viewBox 属性，可以确保 SVG 内容在缩放时保持其比例。
- 使用 preserveAspectRatio 属性：preserveAspectRatio 属性控制 SVG 内容如何在 viewBox 中缩放以适应 SVG 元素的尺寸。将其设置为 xMidYMid meet 可以确保 SVG 内容居中显示，并保持其比例。
例如：
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="40" fill="red"/> </svg>
代码解释：
立即学习“前端免费学习笔记（深入）”；
- viewBox="0 0 100 100"：定义了 SVG 内容的坐标系统，宽度和高度都为 100 个单位。
- preserveAspectRatio="xMidYMid meet"：指示浏览器在缩放 SVG 时，保持其纵横比。xMidYMid 将 SVG 内容居中对齐，meet 确保整个 SVG 内容都可见，即使这意味着 SVG 元素周围会有一些空白。
总结
本文介绍了两种在 CSS 中将元素堆叠在 SVG 动画之上的方法：绝对定位和 Grid 布局。 此外，还提供了使 SVG 动画缩放以适应容器，同时保持 SVG 内部元素比例不变的解决方案。 通过结合这些技术，可以创建更具吸引力和交互性的网页设计。
