使用 CSS 选择器更改 SVG 元素的填充颜色或样式是一种常见的做法,特别是在需要动态调整 SVG 图像的外观时。以下是一些示例,展示了如何使用 CSS 选择器来更改 SVG 元素的填充颜色和样式。
如果你的 SVG 是内联的(即直接嵌入在 HTML 中),你可以直接使用 CSS 选择器来更改其样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG with CSS</title>
<style>
/* 使用 CSS 选择器更改 SVG 元素的填充颜色 */
.my-svg .cls-1 {
fill: red;
}
.my-svg .cls-2 {
fill: blue;
}
</style>
</head>
<body>
<svg class="my-svg" width="100" height="100" viewBox="0 0 100 100">
<circle class="cls-1" cx="50" cy="50" r="40"/>
<rect class="cls-2" x="10" y="10" width="30" height="30"/>
</svg>
</body>
</html>
在这个示例中,我们有一个内联的 SVG,其中包含一个圆形和一个矩形。我们使用 CSS 选择器 .my-svg .cls-1
和 .my-svg .cls-2
来更改它们的填充颜色。
如果你的 SVG 存储在外部文件中,你可以使用 <object>
、<embed>
或 <iframe>
标签将其嵌入到 HTML 中。然后,你可以使用 JavaScript 动态更改其样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG with CSS</title>
<style>
/* 初始样式 */
.my-svg .cls-1 {
fill: green;
}
.my-svg .cls-2 {
fill: yellow;
}
</style>
</head>
<body>
<object id="mySvg" type="image/svg+xml" data="example.svg" class="my-svg"></object>
<script>
document.addEventListener("DOMContentLoaded", function() {
var svgObject = document.getElementById("mySvg");
svgObject.addEventListener("load", function() {
var svgDoc = svgObject.contentDocument;
var circle = svgDoc.querySelector(".cls-1");
var rect = svgDoc.querySelector(".cls-2");
// 更改填充颜色
circle.style.fill = "red";
rect.style.fill = "blue";
});
});
</script>
</body>
</html>
在这个示例中,我们使用 <object>
标签嵌入了一个外部的 SVG 文件 example.svg
。然后,我们使用 JavaScript 在 SVG 加载完成后更改其样式。
你还可以使用 CSS 变量来动态更改 SVG 的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG with CSS Variables</title>
<style>
:root {
--circle-color: green;
--rect-color: yellow;
}
.my-svg .cls-1 {
fill: var(--circle-color);
}
.my-svg .cls-2 {
fill: var(--rect-color);
}
</style>
</head>
<body>
<svg class="my-svg" width="100" height="100" viewBox="0 0 100 100">
<circle class="cls-1" cx="50" cy="50" r="40"/>
<rect class="cls-2" x="10" y="10" width="30" height="30"/>
</svg>
<button onclick="changeColors()">Change Colors</button>
<script>
function changeColors() {
document.documentElement.style.setProperty('--circle-color', 'red');
document.documentElement.style.setProperty('--rect-color', 'blue');
}
</script>
</body>
</html>
在这个示例中,我们使用 CSS 变量 --circle-color
和 --rect-color
来定义 SVG 元素的填充颜色。通过 JavaScript,我们可以动态更改这些变量的值,从而更新 SVG 的样式。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云