在HTML中，SVG(可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言，SVG图片可以在网页上以矢量形式显示，具有无限放大不失真的优点，本文将详细介绍如何在HTML中使用SVG图片，包括创建SVG元素、设置样式、添加动画等。
创建SVG元素
1、使用<svg>标签定义一个SVG容器。
<svg width="200" height="200"> </svg>
2、使用<rect>、<circle>、<ellipse>等标签定义基本图形。
<svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="blue" /> </svg>
3、使用<path>标签定义路径图形。
<svg width="200" height="200"> <path d="M100 100 L200 100 L150 50 Z" stroke="black" fill="none" /> </svg>
4、使用<text>标签定义文本。
<svg width="200" height="200"> <text x="50" y="50" font-size="24" fill="red">Hello SVG!</text> </svg>
设置样式
1、使用style属性设置图形的样式。
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" style="fill:blue;stroke:black;stroke-width:2;cursor:pointer;" onclick="alert('Clicked!')" />
</svg>
2、使用CSS类设置样式。
<!DOCTYPE html>
<html>
<head>
<style>
.my-rect {
fill: blue;
stroke: black;
stroke-width: 2;
}
</style>
</head>
<body>
<svg width="200" height="200">
<rect class="my-rect" x="50" y="50" width="100" height="100" onclick="alert('Clicked!')" />
</svg>
</body>
</html>
添加动画
1、使用CSS动画。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes my-animation {
0% { transform: translateX(-10px); }
100% { transform: translateX(10px); }
}
</style>
</head>
<body>
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" animation:my-animation 2s infinite alternate />
</svg>
</body>
</html>
相关问题与解答
问题1:如何让SVG图片随着页面滚动？
解答：可以使用CSS的position:fixed属性固定SVG图片的位置。
<style>
.fixed-svg {
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/191513.html
微信扫一扫