数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究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 访问圆形并添加了 'move' 关键帧作为动画。
在 'move' 关键帧中，我们更改了圆形的垂直位置，这向我们展示了一个弹跳的圆形。
<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。
67 次浏览
