首页
学习
活动
专区
工具
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的动态生成和处理。

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

相关·内容

SVG 与媒体查询结合使用

如果您想对 SVG 图像使用链接 CSS,则需要执行以下两项操作之一: 使用SVG 文档的元素将 CSS 内联放置 使用or元素(见下面的注释) 注意:Craig...如果要更改 SVG 元素的堆叠顺序,则需要在源中移动它们使用 JavaScript DOM 树对它们重新排序。 事实上,大多数 CSS 2.1 属性不适用于 SVG 文档。...尽管我们不能对 SVG 文档使用大多数 CSS 属性,但我们可以使用 CSS更改元素的颜色。...我们将在下一节中了解如何执行操作。 动画转换 SVG CSS 属性 当我们将过渡动画添加到混合时,将 CSSSVG 结合使用会变得更加有趣。...由于此技术使用onload事件属性SVGLoad事件,因此将我们的 CSS JavaScript 嵌入到 SVG 文件是个好主意。

6.2K00

JavaScript 权威指南第七版(GPT 重译)(六)

按需加载脚本 有时,您可能有一些 JavaScript 代码文档首次加载时不被使用,只有在用户执行某些操作,如点击按钮打开菜单时才需要。...第一阶段,一些脚本实际上并没有执行任何操作,而是仅仅定义函数类供第二阶段使用。其他脚本可能在第一阶段做了大量工作,然后第二阶段不做任何事情。...但您也可以直接在 HTML 嵌入 SVG。如果这样做,甚至可以使用 CSS 样式表来指定字体、颜色线宽等内容。...如果您希望图标对用户活动做出响应——例如,当用户将指针悬停在其上时更改颜色——通常可以使用 CSS 实现。 还可以动态操作直接嵌入 HTML SVG 图形。...(请注意,绘制线基本上与在线两侧填充一个窄区域相同,填充描边本质上是相同的操作。) 如果要使用纯色(半透明颜色)进行填充描边,只需将这些属性设置为有效的 CSS 颜色字符串即可。

90310
  • 使用JavaScriptD3.js实现数据可视化

    2011年2月首次发布,撰写本文时,最新的稳定版本是4.4版本,并且不断更新。D3利用可缩放矢量图形SVG格式,允许您渲染可放大缩小的形状,线条填充,而不会降低质量。...我们将使用文本编辑器Web浏览器。出于测试目的,建议使用工具来检查调试JavaScript、HTMLCSS,例如Firefox Developer ToolsChrome DevTools。...D3,我们用d3.select来让浏览器搜索元素。 我们可以使用d3.select("body").append("svg");执行操作。...在这个例子,我们将在style.css文件操作,并将其限制为填充颜色悬停填充: html, body { margin: 0; height: 100% } ​ .bar { fill...例如,您可能还想更改style.css文件的font-size属性。 完成的代码代码改进 此时,您应该拥有一个JavaScript的D3库呈现的功能完备的条形图。

    21.8K30

    一篇文章带你了解SVG javascript脚本

    使用JavaScript,可以编写SVG脚本。通过脚本编写,可以修改SVG元素,为其设置动画侦听形状上的鼠标事件。...当SVG嵌入HTML页面时,可以JavaScript使用SVG元素,可以使用JavaScript编写SVG脚本。通过编写脚本,可以修改SVG元素,设置它们的动画,或者监听形状上的鼠标事件。...当SVG嵌入到HTML页面时,可以JavaScript使用SVG元素,就像它们是HTML元素一样。JavaScript看起来是一样的。...就像使用HTML元素一样进行操作。 这是一个添加onmouseover onmouseout事件监听器。...> 此示例鼠标悬停在矩形上时更改笔触颜色笔触宽度,并在鼠标离开矩形时重置笔触颜色笔触宽度。

    2.8K20

    IT课程 HTML基础 015_HTML5新特性

    SVG 图形还可以使用 CSS JavaScript 进行操作和动画化。 Canvas 是基于 JavaScript 的绘图 API,可以创建位图图形。...SVG Canvas 的具体区别: 特性 SVG Canvas 图像类型 矢量 位图 缩放 无损 有损 图形类型 矩形、圆形、路径等 任意 操作 CSSJavaScript JavaScript...动画 CSSJavaScript JavaScript 文件大小 通常较小 通常较大 可访问性 优秀 一般 SVG 适用于场景: 需要无损缩放的图形,例如图标、徽标、插图 需要使用 CSS ...推荐 定义日期时间。 推荐 允许文本插入可断行的字符。 推荐 已弃用不推荐元素 定义首字母缩写词。 建议使用 元素代替。...建议使用JavaScript 其他现代技术代替。 不推荐 设置页面中所有文本的默认字体大小颜色。 建议使用CSS 来设置文本样式。 不推荐 设置文本的字体大小。

    9610

    Hexo相关

    什么人能够使用? 理论上来说任何主题任何驱动都可以。只要你的网页还是 HTML+CSS。 引入并不是什么难事,这篇文章只是给小白看的,有相关经验或者大佬可以直接关掉这篇水文了。...如果使用 svg 如果使用 svg 图标,那么需要在 css 样式表中加入如下样式。...方式 svg 也称多色图标,由于不是通过类名,而是使用svg 标签,因此需要通过脚本的方式动态插入。...> > `content` 可以不在 css 写,这样可以配置文件里定义内容。如果写了,会导致配置文件的设置失效。颜色设置同理. ### 其他修改 不管是什么主题,不管是什么样式。...修改图标大小及颜色 图标不显示 (无效果) 这种原因很多种,但如果你稍有常识就不会遇到. 不知道在哪改 在你创建的 css 文件.

    1.5K20

    web 图像技术:前端引入图片的各种方式及其优缺点

    它可以是标签,或者是通过CSS background 属性,还可以使用 SVG 。选择正确的方式是很重要的,它对性能可访问性有很大的影响。...那是因为设置了宽度高度。 通过 CSS 隐藏图像 图像可以用 CSS 隐藏。 但是,它仍将加载页面。 因此,执行操作时请小心。如果一个图像应该被隐藏,那么它可能是出于装饰的目的。...它的作用是可以让图像占据SVG的整个宽度高度,而不会被拉伸压缩。 当宽度较大时,它将填充其父级(SVG)宽度而不会拉伸。 ?...悬停时,形状和文本需要更改颜色。 怎么做? 对我来说最好的解决方案是使用嵌入式SVG。..."> CSS,我们需要将视口的宽度更改为等于大于1350px。

    5K20

    【译】Web的图像技术总结,前端开发各种图片引入的优点缺点及实例

    因此,执行操作时请小心,如果一个图片应该被隐藏,那么它可能是出于装饰的目的。 img { display: none; } 同样,以上内容也不会阻止浏览器加载图片,即使该图片在视觉上是隐藏的。...这样一来,可以使图像占据SVG的整个宽度高度,而不会被拉伸压缩。 当 宽度较大时,它将填充其父级(SVG)宽度而不会拉伸。 ?...这非常类似于CSSobject-fit:cover background-size:cover。 3.1 可访问性问题 关于SVG的可访问性,这使我想起了 元素。...悬停时,形状和文本需要更改颜色。怎么做?对我来说最好的解决方案是使用内联SVG。..."> CSS,我们需要将视口的宽度更改为等于大于 1350px

    5.6K20

    如何绕过XSS防护

    事件方法插入javascript还将适用于任何使用Form,Iframe,Input,Embed等元素的HTML标记类型注入。...() (在对象设置为活动元素之前激发) onBeforeCopy() (攻击者将选定内容复制到剪贴板之前执行攻击字符串-攻击者可以使用execCommand(“Copy”)函数执行操作) onBeforeCut...(如dur)设置为无效值) onTrackChange() (用户攻击者更改播放列表的playlist) onUndo() (用户撤消事务历史记录返回) onUnload() (当用户单击任何链接按下后退按钮时...Netscape 8.1的安全站点模式下,开括号之后、JavaScript指令之前允许的任何错误字符。...[endif]--> BASE tag: IENetscape 8.1以安全模式工作。您需要//来注释掉下一个字符,这样就不会出现JavaScript错误,XSS标记将呈现。

    3.9K00

    HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一、Canvas canvas是HTML5新增一个HTML5标签操作canvas的javascript API,它可以实现在网页完成动态的2D与3D图像技术。... 标记 SVG以及 VML 之间的一个重要的不同是, 有一个基于 JavaScript 的绘图 API,而 SVG VML 使用一个 XML 文档来描述绘图。...不建议使用CSS样式指定宽度高度。 canvas标签中间的内容为替代显示内容,当浏览器不支持canvas标签时会显示出来。...特点: 1.任意放缩 用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。 2.文本独立 SVG图像的文字独立于图像,文字保留可编辑可搜寻的状态。..." width="108" height="108" /> 优势:所有主要浏览器都支持,并允许使用脚本 缺点:不推荐HTML4XHTML中使用(但在HTML5允许) object

    9.6K100

    前端开发不可忽视的知识点汇总(二)

    这种方式也不会阻断浏览器解析HTML。跟 async不同, defer scripts整个文档里的script都被下载完才顺序执行。 46....polyfill 是“旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码库,不支持这些标准 API 的浏览器模拟它们。...306——前一版本HTTP中使用的代码,现行版本不再使用 307——申明请求的资源临时性删除 4**(客户端错误类):请求包含错误语法不能正确执行 400——客户端请求有语法错误,不能被服务器所理解...可以改变父函数的变量,所以使用时要谨慎 63. canvassvg区别 1.从图像类别区分,Canvas是基于像素的位图,而SVG却是基于矢量图形。...3.从操作对象上说,Canvas是基于HTML canvas标签,通过宿主提供的Javascript API对整个画布进行操作的,而SVG则是基于XML元素的。

    1.7K40

    前端动画大乱炖

    requestAnimationFrameAPI的优势如下: 会把每一帧的所有DOM操作集中起来,一次重绘回流中就完成,并且重绘回流的时间间隔紧紧跟随显示器的刷新频率(60 Hz或者75 Hz...); 隐藏不可见的元素,将不会进行重绘回流,这当然就意味着更少的的cpu,gpu内存使用量; 目前,主要浏览器Firefox 23 / IE 10 / Chrome / Safari)都支持这个方法...元素开始,包括开启标签 关闭标签 。...让图像元素按这个轨迹运动; DEMO传送门 WebGL WebGL使得网页支持HTML 标签的浏览器,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0...WebGL 只关注两个方面,即投影矩阵的坐标投影矩阵的颜色使用 WebGL 程序的任务就是实现具有投影矩阵坐标颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。

    1.1K20

    WEB动画的几种实现方式

    借助该技术,您将拥有内容丰富、视觉效果绚丽的交互式体验,而且,无论是浏览器内、还是桌面操作系统(如 Windows Apple Macintosh),您都可以获得这种一致的体验。...SMIL 开发组 SVG 开发组合作开发了 SMIL 动画规范,规范制定了一个基本的 XML 动画特征集合。...特性 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大改变尺寸的情况下其图形质量不会有所损失...Canvas 主要优势是可以应对页面多个动画元素渲染较慢的情况,完全通过 javascript 来渲染控制动画的执行。...移动端开发,直接使用 transition 动画会让页面变慢甚至卡顿。

    2.3K20

    Web前端知识体系精简

    Web前端技术由html、cssjavascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。...减少服务器负载 – 浏览器将只从服务器下载更新过更改过的资源。...8、Canvas SVG Canvas 通过Javascript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。 Canvas ,一旦图形被绘制完成,它就不会继续得到浏览器的关注。...如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。 SVG 是一种使用 XML 描述 2D 图形的语言。...SVG 基于 XML,这意味着 SVG DOM 的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。 SVG ,每个被绘制的图形均被视为对象。

    1.4K30

    超详细的Web 前端知识体系,等你来挑战!

    Web前端技术由Css、HtmlJavaScript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。...; 减少服务器负载 – 浏览器将只从服务器下载更新过更改过的资源。...8、CanvasSVG Canvas 通过Javascript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。 Canvas ,一旦图形被绘制完成,它就不会继续得到浏览器的关注。...如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。 ? SVG 是一种使用 XML 描述 2D 图形的语言。...SVG 基于 XML,这意味着 SVG DOM 的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。 SVG ,每个被绘制的图形均被视为对象。

    1.1K70

    前端-动画大乱炖

    requestAnimationFrameAPI的优势如下: 会把每一帧的所有DOM操作集中起来,一次重绘回流中就完成,并且重绘回流的时间间隔紧紧跟随显示器的刷新频率(60 Hz或者75 Hz...); 隐藏不可见的元素,将不会进行重绘回流,这当然就意味着更少的的cpu,gpu内存使用量; 目前,主要浏览器Firefox 23 / IE 10 / Chrome / Safari)都支持这个方法...f=css3_animation Canvas 是HTML5新增的元素,作为页面图形绘制的容器,可用于通过使用JavaScript的脚本来绘制图形。...> SVG 代码以  元素开始,包括开启标签 关闭标签 。...WebGL 只关注两个方面,即投影矩阵的坐标投影矩阵的颜色使用 WebGL 程序的任务就是实现具有投影矩阵坐标颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。

    89720

    前端高频面试题合集(中高级必备)

    矢量文件的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小屏幕位置等属性。Sass、Less 是什么?为什么要使用他们?...,构建DOM树、构建CSSOM树、构建渲染树绘制页面;当界面需要重绘由于某种操作引发回流时,该线程就会执行。...,这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃,也就是不稳定的问题JavaScript也是运行在渲染进程的,所以即使JavaScript阻塞了渲染进程,影响到的也只是当前的渲染页面,而并不会影响浏览器其他页面...核心任务是将 HTML、CSS JavaScript 转换为用户可以与之交互的网页,排版引擎BlinkJavaScript引擎V8都是运行在该进程,默认情况下,Chrome会为每个Tab标签创建一个渲染进程...而这个操作相对而言是比较耗时的每次 DOM 操作就会引发线程的上下文切换——从 JavaScript 引擎切换到渲染引擎执行对应操作,然后再切换回 JavaScript 引擎继续执行,这就带来了性能损耗

    68020

    使用这些 CSS 属性选择器来提高前端开发效率!

    通常将 HTML 属性放在方括号,称为属性选择器,如下: [href] { color: red; } 这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。...就像你的 DNA 一样,它们有内在的逻辑来帮助你选择各种属性组合值。它们可以匹配属性任何属性,甚至字符串值,而不是像标签、类id选择器那样精确匹配。...[title|="gene"] 最后,还有一个匹配任何子字符串的模糊搜索属性操作符,属性做字符串拆分,只要能拆出来dna这个词就行: [title*="dna"] 使这些属性选择器更加强大的是,它们是可堆叠的...a[download][href$="pdf"]:after { content: url(pdf-icon.svg); } 覆盖重新使用已废弃/弃用的代码 我们都遇到过时代码过时的旧网站,...如果你道要覆盖的确切属性值,并且希望它出现的任何地方覆盖它,那么这种方法的效果最好。

    2.2K50

    CSS变量(自定义属性)实践指南

    CSS变量预处理器的变量有什么不同? 你可能已经CSS预处理器尝试过使用变量而带来的好处了,比如SassLess。 预处理器让你能设置变量,以及函数、循环、数学计算等等地方中使用它们。...这意味着,你可以样式表,在内联样式SVG标签中直接更新CSS变量,甚至可以在运行时用JavaScript直接修改它。而你是无法对预处理器的变量做上面这些操作的。...如何在SVG使用CSS变量 CSS变量SVG配合得很好。你可以使用CSS变量去修改SVG的样式,以及呈现相关的属性。 举个例子,假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...如何通过JavaScript操作CSS变量 另一个超级酷的事情就是,你可以直接通过JavaScript代码访问CSS变量。...对于上面的代码,Chrome其他支持CSS变量的浏览器标签里的文本将是蓝色: ? IE11,由于它不支持CSS变量,页面将显示灰色文本: ? 可以查看在线的示例7代码。

    1.4K10
    领券