给出一个对SVG图像进行样式化的CSS例子,同时给出CSS代码与HTML中应用此css包含svg的代码
时间: 2024-05-15 22:20:09 浏览: 13
CSS代码:
```css
/* 给SVG中的所有路径设置颜色和线宽 */
path {
stroke: #008000;
stroke-width: 2px;
fill: none;
}
/* 给SVG中的所有矩形设置颜色和线宽 */
rect {
stroke: #FF0000;
stroke-width: 2px;
fill: none;
}
/* 给SVG中的所有文本设置颜色和字体大小 */
text {
fill: #000;
font-size: 16px;
}
```
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>SVG样式化示例</title>
<style>
/* 在此处引入上面的CSS代码 */
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="10" y="10" width="100" height="50" />
<path d="M 10 100 L 100 100 L 55 150 Z" />
<text x="10" y="180">SVG样式化示例</text>
</svg>
</body>
</html>
```
在上面的例子中,我们使用CSS样式化了SVG图像中的路径、矩形和文本。在HTML代码中,我们将SVG图像作为一个整体嵌入到了页面中,并在head标签中引入了我们编写的CSS代码。