使用 CSS 和 Blade 在 SVG 动画上显示内容和图像

本文旨在解决在 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 内部元素的比例不变，可以使用以下方法：

1. 移除 SVG 元素的 width 和 height 属性：这将允许 SVG 根据其容器的大小进行缩放。
2. 设置 viewBox 属性：viewBox 属性定义了 SVG 内容的坐标系统。通过设置 viewBox 属性，可以确保 SVG 内容在缩放时保持其比例。
3. 使用 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 内部元素比例不变的解决方案。 通过结合这些技术，可以创建更具吸引力和交互性的网页设计。