在HTML中使用SVG图片有两种方式:
<img>
标签,将SVG文件作为图片引入<img src="image.svg" alt="SVG image">
这种方式比较简单,但是对SVG图像的控制能力比较有限。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
这种方式可以更好地控制SVG图像的样式和行为。需要注意的是,SVG代码必须放在<svg>
标签中,并且需要指定宽度和高度。
在控制SVG图像的样式时,可以使用CSS,例如:
svg {
fill: red;
stroke: blue;
}
这样就可以将SVG图像的填充颜色设置为红色,描边颜色设置为蓝色。
需要注意的是,如果SVG图像中使用了外部CSS文件或者JavaScript文件,需要在HTML中引入这些文件,例如:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>
</body>
</html>
其中,<link>
标签用于引入CSS文件,<script>
标签用于引入JavaScript文件。