在js中需要svg时，svg不能更改颜色
在 JavaScript 中使用 SVG（可缩放矢量图形）时，默认情况下无法直接更改 SVG 图像中的颜色。这是因为 SVG 图像是以 XML 格式保存的，其中的颜色信息通常是通过 CSS 样式或内联样式指定的。要更改 SVG 图像的颜色，可以通过以下几种方式实现：
- 使用 CSS：可以通过为 SVG 图像的容器元素或特定元素添加 CSS 样式来更改颜色。通过选择目标元素并设置其
fill或stroke属性，可以更改 SVG 中的填充色或描边色。 - 使用内联样式：可以直接在 SVG 元素上使用内联样式，通过设置元素的
fill或stroke属性来更改颜色。内联样式的优先级高于外部 CSS 样式，因此内联样式将覆盖外部样式。 - 使用 JavaScript：通过使用 JavaScript，可以动态地更改 SVG 元素的属性来实现颜色的更改。可以选择目标元素并通过修改其属性值来改变填充色或描边色。
尽管 SVG 默认情况下无法直接更改颜色，但可以通过上述方法来实现颜色的定制化。对于在 JavaScript 中使用 SVG 的应用场景，例如图表可视化、图像处理等，可以结合具体的业务需求，选择适合的方式来修改 SVG 图像的颜色。
腾讯云提供了一系列与云计算和前端开发相关的产品和服务，其中包括对象存储、内容分发网络（CDN）、云函数、容器服务等。您可以通过腾讯云官方文档了解更多相关产品和详细的介绍：
- 对象存储（COS）：腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，可用于存储和处理各种类型的文件和数据。官方文档链接：https://cloud.tencent.com/document/product/436
- 内容分发网络（CDN）：腾讯云 CDN 是一种分布式部署的加速服务，通过将内容部署到世界各地的边缘节点，提供更快的访问速度和更高的可靠性。官方文档链接：https://cloud.tencent.com/document/product/228
- 云函数（SCF）：腾讯云云函数（SCF）是一种无服务器的事件驱动计算服务，通过事件触发执行用户编写的代码，无需管理底层基础设施。官方文档链接：https://cloud.tencent.com/document/product/583
- 容器服务（TKE）：腾讯云容器服务（TKE）是一种高度可扩展的容器管理服务，可以帮助用户快速部署、管理和扩展容器化应用程序。官方文档链接：https://cloud.tencent.com/document/product/457
相关·内容
1回答
我想更改SVG的颜色。在我的js文件中，我首先包含它，如下所示： let VrmSvg = require('@src/assets/images/vrm.svg'); 然后，我尝试这样做： let _new_svg =在我之前，其他开发人员会尝试进行http api调用来获取svg，作为响应，他正在执行与我相同代码(替换函数)。所以我认为不同之处在于需要<
浏览 66提问于2019-06-12得票数 0
2回答
我正在尝试使用JS更改用css定义的svg填充颜色。由于某些原因，它不能工作。下面是我的代码：<svg id="secondalert"><style>.cls-1{fill:#000000;}</style></svg>
浏览 25提问于2017-08-02得票数 2
回答已采纳
1回答
你好，我想知道如何在span中选择SVG并在悬停时更改它的颜色。我的svg是从span内部的另一种样式调用的：我想做的是这样的事情：但它并不适用于SVG。<
浏览 0提问于2015-09-11得票数 0
回答已采纳
1回答
我有一个svg图标和填充:没有预定义。我想给它加一个rgb颜色，但它不工作！.complete-look svg { fill: black; (doenst work) box-sizing: inherit;svg[Estilo de atributos] {
width: 32;
浏览 6提问于2022-08-30得票数 -2
1回答
我试图在表格单元格中更改DateTimePicker组件中文本的颜色。还有其他方法来改变文本的颜色吗？这张桌子的主题也是暗的。
浏览 4提问于2022-08-20得票数 0
回答已采纳
1回答
我想更改由\eqref{}标签创建的MathJax链接的颜色，以匹配我的网站的配色方案。我怎样才能在没有额外CSS的情况下更好地实现这一点？我正在使用带有SVG输出的MathJax 2.7.7，我当前的配置如下所示： <!<script type="text/x-mathjax-config"> extensions: ["tex2jax.js", "TeX/AMSm
浏览 27提问于2020-11-26得票数 0
回答已采纳
5回答
在悬停时，我很难更改SVG中特定元素的颜色。我需要在JS而不是CSS中这样做。在鼠标输出时，填充的颜色应该回到原来的颜色。这是一只小提琴
<svg id="Ebene_1"
浏览 11提问于2022-11-02得票数 0
2回答
是否有一种方法可以更改用作游标的svg图像路径的填充颜色(如：cursor: url(cur/play.svg), auto;)？在悬停元素之前，我不知道它的颜色，所以它必须是CSS或JS解决方案(我不能预先做另一个svg )。
浏览 4提问于2014-05-27得票数 2
回答已采纳
2回答
我正在尝试将MySQL DB链接到SVG映像，以便使用Raphael动态地更改SVG元素。我有一个PHP，其中我使用MySQL查询，并将结果以表形式显示到html页面：(下面的脚本工作，只有在满足时间戳条件时才显示用户名和图片。)如何将上述类似的概念，即将结果以表形式显示到SVG映像，其中SVG元素只在满足查询条件时才会更改/更新？编辑：
在MySQL DB<
浏览 3提问于2015-02-19得票数 1
回答已采纳
我有一个svg图标是黑色，我想改变颜色为浅绿色。如何在以下仅使用CSS的预定义样式中做到这一点？.jp-SaveIcon {}
浏览 3提问于2017-01-27得票数 0
回答已采纳
2回答
我需要做的是了解鼠标是否离开SVG对象(路径，即它不是矩形-不能只使用偏移量，不能使用圆形-不能使用半径和中心位置等)。我不能使用鼠标离开/进入事件，因为我有一个鼠标指针总是在所有元素之上。显然，我也不能只使用elementFromPoint -因为它提供了顶层元素。我上传了我的当前代码到我的网站，我没有创
浏览 1提问于2013-05-15得票数 3
回答已采纳
我正在使用带有自定义标记的leaflet js。这些标记需要移动、更改颜色和旋转。移动相当简单，因为可以更新标记位置。对于颜色，我需要访问图像上的特定路径，这是一个svg。如果我可以在js中访问svg，也应该能够处理旋转。
我的想法是在js中加载svg，然后根据需要修改它，然后将其分配给自定义图标。有没有一种简单的方法可以<em
浏览 2提问于2015-08-19得票数 0
3回答
我有一种化学化合物被装成svg：'https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null, null它有原来的颜色，我需要改变成橙色(所有的字母，键和原子)。
浏览 10提问于2015-05-06得票数 0
回答已采纳
我使用<IconComponent :imgIcon="'../..不能将img转换成svg。我有：在第二个组件中，我更改为： fill: red;}
但
浏览 8提问于2019-11-30得票数 0
我试图根据某些变量定制SVG的颜色。为了便于理解，我希望能够在悬停时使用jQuery淡出SVG的颜色。我已经创建了一个自定义SVG，并将其链接到
我已经通过<object>嵌入了SVG，但不确定在哪里可以更改SVG的颜色。我之所以使用<object>，是因为它显然更兼容更多的浏览器。<object class="nav_ico" id="n
浏览 3提问于2013-11-27得票数 1
回答已采纳
我正在尝试用three.js创建一个配置器，但是我需要改变产品的颜色，我想我可以使用svg作为纹理，改变svg的填充属性并很容易地更新纹理，但是我没有很好的效果。目前我所拥有的是-The
浏览 66提问于2017-08-29得票数 0
回答已采纳
我得到了这个svg：<img src="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI
浏览 51提问于2019-04-22得票数 1
回答已采纳
1回答
因此，我以这种方式加载SVG：在浏览器中，它是这样显示的：所以现在我想更改cls-1和cls-2填充颜色。我尝试使用style标签更改.cls-2和.cls-1类的颜色，并尝试在
浏览 0提问于2019-04-03得票数 2
2回答
我的目标是在重复的背景中使用SVG，但我需要能够在CSS中更改其fill颜色，以便在网站的不同部分使用。就我对SVG的理解而言，它不能被视为外部文件(background:url(image.svg))，因为这样我就无法像它的fill proeprty那样更改CSS属性。另一方面，SVG不能在HTML (<svg>...<&#x
浏览 3提问于2021-02-17得票数 2
回答已采纳
2回答
我使用生成simple，并使用symbol选项，因此在调用每个SVG时，我可以使用以下简单的方法：
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg当我需要使用这些图标作为背景元素时，问题就来了。我知道你不能使用xlink:href从雪碧中抓取一个特定的图标--在这里需要</e
浏览 2提问于2014-09-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
