开发人员使用 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。
