CSS Content SVG

2025年1月31日 | 阅读 6 分钟

CSS 中的 'content' 属性用于在元素的实际内容之前或之后添加生成的内容。在使用 SVG（可缩放矢量图形）时，您可以通过使用 'content' 属性在 CSS 中插入 SVG 内容。

这个简单的例子演示了使用 `content` 属性的 SVG。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .svg-container::before {
      content: url('path/to/your-svg-file.svg');
      display: block;
      width: 100px; /* Set the width as needed */
      height: 100px; /* Set the height as needed */
    }
  </style>
</head>
<body>
  <div class="svg-container"></div>
</body>
</html>

在这个例子中

伪元素由 '.svg-container::before' 选择器在具有类 (svg-container) 的元素内容之前选择。
'content' 属性设置为 'url('path/to/your-svg-file.svg')' 以插入 SVG 内容。
为确保伪元素被视为块级元素，请使用 'display: block;' 属性。
可以通过调整 'width' 和 'height' 参数来更改插入的 SVG 的尺寸。

请替换 'path/to/your-SVG-file'。将 SVG 替换为 SVG 文件的真实路径。

重要的是要记住，使用 (content) 属性并不支持所有 SVG 功能。虽然通常支持简单的路径和形状，但更复杂的 SVG 或交互式元素可能无法按预期运行。

特别是在 CSS 中利用 'content' 属性使用 SVG 内容

1. 数据 URI

要将 SVG 直接嵌入到 CSS 文件中，请使用数据 URI 而不是在 'url()' 函数中提供文件路径。当处理小型 SVG 或希望最大程度地减少 HTTP 查询数量时，这会很有帮助。

.svg-container::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>');
  display: block;
  width: 100px;
  height: 100px;
}

2. 多个 SVG

您可以使用多个 'content' 规则为单独的伪元素（`::before`、`::after`）插入不同的 SVG。这使您可以使用 CSS 创建的内容来创建复杂的视觉效果。

.svg-container::before {
  content: url('path/to/svg1.svg');
  display: block;
  width: 100px;
  height: 100px;
}

.svg-container::after {
  content: url('path/to/svg2.svg');
  display: block;
  width: 50px;
  height: 50px;
}

3. CSS 动画

CSS 动画可以应用于包含 SVG 内容的伪元素。因此，您现在可以产生动态效果。

.svg-container::before {
  content: url('path/to/animated-svg.svg');
  display: block;
  width: 100px;
  height: 100px;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. CSS 变量

您 SVG 材料的方面可以通过 CSS 变量动态更改。

:root {
  --svg-path: url('path/to/your-svg-file.svg');
}

.svg-container::before {
  content: var(--svg-path);
  display: block;
  width: 100px;
  height: 100px;
}

接下来，通过更改 CSS 变量的值，您可以动态更新 SVG 路径。

在 CSS 中使用 SVG 内容时，这些方法提供了更大的自由度和创造力。

在 CSS 中使用 `content` 属性与 SVG 内容交互时，请记住以下几点

1. 用 CSS 操作 SVG

就像处理 HTML 一样，您可以使用 CSS 样式化和处理 SVG 内容。这包括修改颜色和大小，甚至应用 CSS 过渡，以及将样式应用于某些 SVG 元素。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
  fill: blue; /* Change fill color */
  transition: fill 0.5s ease; /* Add a transition effect */
}

.svg-container:hover::before {
  fill: red; /* Change fill color on hover */
}

2. 响应式 SVG

您可以使用 `max-width` 或基于百分比的尺寸来使您的 SVG 内容具有响应性。通过这样做，可以确保 SVG 在其容器内正确缩放。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100%; /* Responsive width */
  max-width: 200px; /* Set a maximum width */
  height: auto; /* Maintain aspect ratio */
}

3. 备用内容

对于不支持 SVG 图像或 'content' 属性的浏览器，提供备用内容。这保证了许多浏览器上的积极用户体验。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
}

/* Fallback for browsers that do not support generated content or SVG */
.svg-container::before {
  content: none;
  background: url('path/to/fallback-image.png') center/cover;
  /* Additional styling for the fallback content */
}

4. CSS 过滤器

SVG 内容的外观可以通过 CSS 过滤器改变。可以应用过滤器来创建颜色改变、亮度改变和模糊等效果。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
  filter: grayscale(50%);
}

5. CSS 伪元素和内部 SVG

伪元素（{::before}、{::after}）也可以用于将 SVG 内容直接添加到元素中。当您希望插入装饰性 SVG 元素而无需使用额外的 HTML 语法时，这会很有帮助。

.svg-container::before {
  content: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="red"/></svg>';
  display: block;
  width: 100px;
  height: 100px;
}

6. SVG 精灵图

对于许多 SVG 图标，请考虑使用 SVG 精灵图。SVG 精灵图涉及将多个 SVG 集成到单个文件中，并使用 CSS 引用特定的精灵元素。

.icon {
  background: url('path/to/svg-sprite.svg') no-repeat;
}

.icon-home {
  width: 24px;
  height: 24px;
  background-position: 0 0; /* Adjust based on sprite layout */
}

7. SVG 作为背景

当 SVG 用作背景图片时，可以更好地控制定位和重复。

.svg-background {
  background: url('path/to/your-svg-file.svg') center/cover no-repeat;
  width: 100px;
  height: 100px;
}

8. SVG 内部的文本

如果您的 SVG 中有任何文本，您可以使用 CSS 样式化它。这在处理由外部程序生成的 SVG 时非常有用。

.svg-container text {
  fill: blue;
  font-size: 12px;
}

9. 内容属性中的 SVG 与数据 URI

通过将 `content` 属性与数据 URI 结合使用，SVG 内容可以轻松地嵌入到 CSS 中。

.svg-container::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="red"/></svg>');
  display: block;
  width: 100px;
  height: 100px;
}

10. 剪切和遮罩

使用 CSS 遮罩和剪切功能使特定的 SVG 元素可见或不可见。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* or use mask properties */
  /* mask: url(#maskId); */
}

11. 混合 CSS 和 SVG 动画

为了获得更复杂的外观，请结合 SVG 和 CSS 动画。您可以通过两种方式动画 SVG 元素：使用 SVG 内部的 {animate} 元素或使用 CSS 动画。

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
  animation: rotate 3s linear infinite;
}

12. 具有渐变的内容中的 SVG

您可以包含带有渐变的 SVG 并使用 CSS 自定义它们。

.svg-container::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><rect width="100%" height="100%" fill="url(%23grad1)" /></svg>');
  display: block;
  width: 100px;
  height: 100px;
}

13. 外部 SVG 精灵图和 `<use>` 元素

为了使代码更清晰、更易于管理，请将 SVG 符号保存在外部文件中，并使用 `<use>` 元素引用它们。

.svg-container::before {
  content: url('path/to/sprite-file.svg#icon-id');
  display: block;
  width: 100px;
  height: 100px;
}

14. CSS 变量中的 SVG

为了更快地更改主题和进行更动态的控制，请将 SVG 内容存储在 CSS 变量中。

:root {
  --svg-content: url('path/to/your-svg-file.svg');
}

.svg-container::before {
  content: var(--svg-content);
  display: block;
  width: 100px;
  height: 100px;
}

15. CSS Grid 与 SVG

将 CSS Grid 布局与 SVG 内容结合使用以实现复杂设计。

.svg-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
}

16. 具有 CSS 和 JavaScript 的交互式 SVG

将 JavaScript 用于交互性与 CSS 用于样式相结合。可以使用 CSS 样式化 SVG 元素，并添加事件监听器以使用 JavaScript 实现动态行为。

.svg-container:hover::before {
  fill: green; /* Change fill color on hover */
  transform: scale(1.2); /* Scale on hover */
  transition: fill 0.3s ease, transform 0.3s ease; /* Add transitions */
}

17. SVG 过滤器用于视觉效果

SVG 过滤器是向 SVG 内容添加视觉效果的强大方法。CSS 允许您直接使用过滤器函数，例如 'blu'、'drop-shadow' 和 'brightness'。

.svg-container::before {
  content: url('path/to/your-svg-file.svg');
  display: block;
  width: 100px;
  height: 100px;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}

18. SVG 作为背景与多重背景

使用 CSS 的多个背景层将 SVG 与其他背景颜色或图片混合。

.element {
  background: url('path/to/your-background-image.jpg') center/cover,
              url('path/to/your-svg-file.svg') center/contain no-repeat;
  width: 100px;
  height: 100px;
}

这些额外的技术提供了更高级的方法来增强 CSS 中的 SVG 集成，提供更大的控制、交互性和视觉吸引力。

下一主题CSS Disabled

CSS Content SVG

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Content SVG

相关帖子

CSS Float Center

CSS before :hover

CSS Profile Login

CSS Onclick

CSS Stripes

CSS Grayscale

如何在 CSS 中设置背景图片的透明度

Responsive Image Gallery in HTML CSS

CSS Flexbox Space Between

CSS Hacks

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器