CSS与SVG的真实世界应用是什么？-css教程-PHP中文网

CSS与SVG的真实世界应用是什么？

PHPz

发布： 2023-09-17 16:05:06

转载

1259人浏览过

css与svg的真实世界应用是什么？

开发人员使用 CSS 来设计网页内容的样式并正确表示它。它可以用来使任何内容都有吸引力。

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

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

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

立即学习“前端免费学习笔记（深入）”；

示例 1（向 SVG 图像添加基本样式）

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

我们使用“circle”标签访问 CSS 中的 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。

以上就是CSS与SVG的真实世界应用是什么？的详细内容，更多请关注php中文网其它相关文章！