开发人员使用 CSS 来设计网页内容的样式并正确表示它。它可以用来使任何内容都有吸引力。
SVG 的完整形式是可缩放矢量图像。 SVG 是一种图像类型，如 jpg 或 png。 jpg 或 png 是使用像素网格创建的光栅图像。如果我们放大光栅图像，它就会开始变得模糊。
矢量图像是使用数学函数创建的，该数学函数绘制矢量并将它们连接起来形成形状。由于它不是像素网格，因此即使我们放大超过 100 倍，它也永远不会变得模糊。
每当我们将 CSS 与矢量图像结合使用时，它都会使其更具吸引力，并且我们可以在网页上创建强大的图像。在本教程中，我们将学习 CSS 与 SVG 的实际用法。
立即学习“前端免费学习笔记（深入）”；
示例 1（向 SVG 图像添加基本样式）
在下面的示例中，我们创建了 SVG 格式的圆形。我们使用“svg”HTML 标签来创建 SVG 图像。此外，我们还设置了视图框的尺寸。此外，我们在视图框中设置了圆的 x 和 y 位置。
我们使用“circle”标签访问 CSS 中的 svg 图像并设置其样式。用户可以观察到他们可以通过 CSS 控制填充颜色、描边颜色和描边宽度。但是，他们也可以使用各种 CSS 属性添加其他样式。
circle { fill: blue; stroke: red; stroke-width: 3; } Using the CSS with SVG to style the SVG image
示例2（在SVG图像上添加悬停效果）
在下面的示例中，我们以 SVG 矢量格式创建了两个正方形。此外，我们还为每个形状指定了类名称。我们使用 CSS 中的类名访问 HTML 元素并设置填充颜色。此外，我们还为形状设置了悬停效果。在输出中，将鼠标悬停在形状上，您可以观察其颜色如何变化。
.shape {fill: green;} .shape:hover {fill: #ff0000;} Using the CSS with SVG to add hover effect on the SVG image.
示例 3（将动画添加到 SVG 图像）
在下面的示例中，我们将动画添加到 SVG 图像中。在这里，我们使用 SVG 创建了圆形。在 CSS 中，我们使用圆的 id 访问圆，并将“移动”关键帧添加为动画。
在“移动”关键帧中，我们更改圆圈的垂直位置，这向我们显示了一个弹跳的圆圈。
#ball { animation: move 3s infinite; transform-origin: center bottom; } @keyframes move { 0% {transform: translateY(0);} 50% {transform: translateY(-30px);} 100% {transform: translateY(0);} } Using the CSS with SVG to add hover effect on the SVG image.
我们学会了将 CSS 与 SVG 图像一起使用。在第一个示例中，我们学习了 CSS 和 SVG 的基本用法。在第二个例子中，我们在SVG图像上添加了悬停效果；在上一个示例中，我们将动画添加到 SVG 图像中。
在实际开发中，用户可以将 CSS 与 SVG 结合使用，添加动画并创建 GIF。
以上就是CSS与SVG的真实世界应用是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626235.html
微信扫一扫 
支付宝扫一扫 
