极客笔记什么是在SVG中使用CSS的真实世界用途
开发者使用CSS来设计网页的内容并正确展示它。它可以用来使任何内容更具吸引力。
SVG的全称是可缩放矢量图像。SVG是一种像jpg或png一样的图像类型。jpg或png是使用像素网格创建的光栅图像。如果我们放大光栅图像，它开始变得模糊。
矢量图像使用数学函数创建，这些函数绘制矢量并将它们连接成形状。因为它不是像素网格，所以即使我们放大100倍以上，它也不会变得模糊。
每当我们在矢量图像中使用CSS，它使图像更有吸引力，我们可以在网页上创建强大的图像。在本教程中，我们将学习CSS与SVG的真实世界用途。
示例1（为SVG图像添加基本样式）
在下面的示例中，我们以SVG格式创建了一个圆形。我们使用了“svg” HTML标签来创建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访问圆，并将“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>
我们学会了如何在SVG图片中使用CSS。在第一个示例中，我们学习了CSS与SVG的基本用法。在第二个示例中，我们给SVG图片添加了hover效果；在最后一个示例中，我们给SVG图片添加了动画效果。
在真实的开发中，用户可以使用CSS与SVG，添加动画效果，还可以创建GIF动画。