在CSS和/或JavaScript中更改SVG颜色(使用object标签)不会执行任何操作的原因是,SVG文件通过object标签嵌入到HTML文档中时,被视为独立的文档对象,与HTML文档的CSS和JavaScript环境相互隔离。因此,直接在HTML文档中的CSS和JavaScript中更改SVG颜色是无效的。
要在CSS和JavaScript中更改SVG颜色,可以使用以下方法:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
#myCircle {
fill: blue;
}
document.getElementById("myCircle").setAttribute("fill", "green");
SVG文件(example.svg):
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" style="--circle-color: var(--default-color, red);" />
</svg>
HTML文档:
<object data="example.svg" type="image/svg+xml"></object>
CSS:
:root {
--default-color: red;
}
#myCircle {
fill: var(--circle-color);
}
JavaScript:
document.documentElement.style.setProperty('--circle-color', 'blue');
这样,通过更改CSS变量的值,可以动态改变SVG元素的颜色。
需要注意的是,以上方法仅适用于直接在HTML文档中嵌入SVG的情况,对于通过object标签引入的外部SVG文件,无法直接在HTML文档中的CSS和JavaScript中更改其颜色。如果需要对外部SVG文件进行操作,可以考虑使用其他方法,如使用JavaScript库(如Snap.svg、D3.js)或使用服务器端技术进行SVG的动态生成和处理。
领取专属 10元无门槛券
手把手带您无忧上云