(1)通过CSS修改SVG元素填充颜色
SVG使用CSS的fill属性来填充元素的颜色。通过定义CSS规则,可以轻松地修改SVG图形的颜色。
svg {
fill: red;
}
2、使用CSS修改SVG元素描边颜色
SVG使用stroke属性来定义和修改图形元素的描边颜色。
svg {
stroke: blue;
stroke-width: 3px;
}
3、在 SVG 代码中直接修改
使用fill属性可以修改SVG形状的填充颜色,使用stroke属性可以修改SVG形状的描边颜色。
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="#ff0000" />
</svg>
SVG 中也可以使用 css 样式:
<svg width="100" height="100">
<style>
#shape1 { fill: green; }
#shape2 { fill: red; }
</style>
<rect x="10" y="10" width="30" height="30" id="shape1" />
<rect x="60" y="10" width="30" height="30" id="shape2" />
</svg>