首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在CSS和/或javascript中更改SVG颜色(使用object标签)不会执行任何操作

在CSS和/或JavaScript中更改SVG颜色(使用object标签)不会执行任何操作的原因是,SVG文件通过object标签嵌入到HTML文档中时,被视为独立的文档对象,与HTML文档的CSS和JavaScript环境相互隔离。因此,直接在HTML文档中的CSS和JavaScript中更改SVG颜色是无效的。

要在CSS和JavaScript中更改SVG颜色,可以使用以下方法:

  1. 使用内联SVG:将SVG代码直接嵌入到HTML文档中,而不是使用object标签。然后,可以通过CSS的样式属性或JavaScript的DOM操作来更改SVG元素的颜色。例如:
代码语言:txt
复制
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
代码语言:txt
复制
#myCircle {
  fill: blue;
}
代码语言:txt
复制
document.getElementById("myCircle").setAttribute("fill", "green");
  1. 使用CSS变量:在SVG文件中定义CSS变量,并在HTML文档的CSS中使用这些变量来控制颜色。然后,可以通过JavaScript来更改CSS变量的值,从而改变SVG元素的颜色。例如:

SVG文件(example.svg):

代码语言:txt
复制
<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文档:

代码语言:txt
复制
<object data="example.svg" type="image/svg+xml"></object>

CSS:

代码语言:txt
复制
:root {
  --default-color: red;
}

#myCircle {
  fill: var(--circle-color);
}

JavaScript:

代码语言:txt
复制
document.documentElement.style.setProperty('--circle-color', 'blue');

这样,通过更改CSS变量的值,可以动态改变SVG元素的颜色。

需要注意的是,以上方法仅适用于直接在HTML文档中嵌入SVG的情况,对于通过object标签引入的外部SVG文件,无法直接在HTML文档中的CSS和JavaScript中更改其颜色。如果需要对外部SVG文件进行操作,可以考虑使用其他方法,如使用JavaScript库(如Snap.svg、D3.js)或使用服务器端技术进行SVG的动态生成和处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券