CSS 与 SVG 的实际用途是什么?

cssweb developmentfront end technology更新于 2024/5/21 8:44:17

开发人员使用 CSS 来设置网页内容的样式并使其正确呈现。它可以用来使任何内容更具吸引力。

SVG 的全称是可缩放矢量图像。SVG 是一种类似于 jpg 或 png 的图像类型。jpg 或 png 是使用像素网格创建的光栅图像。如果我们放大光栅图像，它会开始变得模糊。

矢量图像是使用数学函数创建的，这些函数绘制矢量并将它们连接起来形成形状。由于它不是像素网格，即使我们放大超过 100 倍，它也不会模糊。

每当我们将 CSS 与矢量图像结合使用时，它都会使其更具吸引力，并且我们可以在网页上创建强大的图像。在本教程中，我们将学习 CSS 与 SVG 的实际用法。

示例 1(为 SVG 图像添加基本样式)

在下面的示例中，我们创建了 SVG 格式的圆形。我们使用 HTML 标签"svg"创建了 SVG 图像。此外，我们还设置了视图框的尺寸。此外，我们还设置了圆形在视图框中的 x 和 y 位置。

我们使用 CSS 标签"circle"访问了 SVG 图像并对其进行了样式设置。用户可以观察到，他们可以通过 CSS 控制填充颜色、描边颜色和描边宽度。此外，他们还可以使用各种 CSS 属性添加其他样式。

<html>
<head>
   <style>
      circle {
         fill: blue;
         stroke: red;
         stroke-width: 3;
      }
   </style>
</head>
<body>
   <h3> Using the CSS with SVG <i> to style the SVG image </i> </h2>
   <svg viewBox="0 0 100 100">
      <circle cx="20" cy="20" r="10" />
   </svg>
</body>
</html>

示例 2(在 SVG 图像上添加悬停效果)

在下面的示例中，我们以 SVG 矢量格式创建了两个正方形。此外，我们还为每个形状指定了类名。我们在 CSS 中使用类名访问 HTML 元素并设置填充颜色。此外，我们还为形状设置了悬停效果。在输出中，将鼠标悬停在形状上，您可以观察其颜色的变化。

<html>
<head>
   <style>
      .shape {fill: green;}
      .shape:hover {fill: #ff0000;}
   </style>
</head>
<body>
   <h4> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h4>
   <svg viewBox="0 0 960 600">
      <g id="shapes">
         <path class="shape" d="M100,100 L150,50 L200,100 L150,150 Z" />
         <path class="shape" d="M400,100 L450,50 L500,100 L450,150 Z" />
      </g>
   </svg>
</body>
</html>

示例 3(向 SVG 图像添加动画)

在下面的示例中，我们为 SVG 图像添加了动画。这里，我们使用 SVG 创建了圆形。在 CSS 中，我们使用 id 访问了圆形，并添加了"移动"关键帧作为动画。

在"移动"关键帧中，我们改变了圆形的垂直位置，使其呈现出一个弹跳的圆形。

<html>
<head>
   <style>
      #ball {
         animation: move 3s infinite;
         transform-origin: center bottom;
      }
      @keyframes move {
         0% {transform: translateY(0);}
         50% {transform: translateY(-30px);}
         100% {transform: translateY(0);}
      }
   </style>
</head>
<body>
   <h3> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h3>
   <svg viewBox="0 0 100 100">
      <circle id="ball" cx="30" cy="30" r="15" fill="aqua" />
   </svg>
</body>
</html>

我们学习了如何将 CSS 与 SVG 图像结合使用。在第一个示例中，我们学习了 CSS 与 SVG 的基本用法。在第二个示例中，我们在 SVG 图像上添加了悬停效果;在最后一个示例中，我们为 SVG 图像添加了动画。

在实际开发中，用户可以将 CSS 与 SVG 结合使用，添加动画并创建 GIF。