使用多种颜色更改悬停时的svg元素填充颜色
在前端开发中，我们可以使用CSS和JavaScript来实现使用多种颜色更改悬停时的SVG元素填充颜色。具体实现方法如下：
- 首先，我们需要将SVG图像嵌入到HTML页面中。可以使用
<svg>标签来嵌入SVG图像，也可以使用<object>或<embed>标签来引入外部的SVG文件。 - 使用CSS选择器选择需要改变填充颜色的SVG元素。可以通过类名、ID或标签名等方式来选择元素。
- 在CSS中，使用
:hover伪类来指定悬停时的样式。通过设置fill属性来改变SVG元素的填充颜色。可以使用任何有效的颜色值，例如十六进制、RGB、RGBA或颜色名称。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.svg-element {
fill: blue; /* 默认填充颜色 */
}
.svg-element:hover {
fill: red; /* 悬停时的填充颜色 */
}
</style>
</head>
<body>
<svg width="100" height="100">
<rect class="svg-element" x="10" y="10" width="80" height="80" />
</svg>
</body>
</html>在上述示例中，我们定义了一个类名为svg-element的SVG元素，并设置了默认的填充颜色为蓝色。当鼠标悬停在该元素上时，通过:hover伪类选择器，将填充颜色改变为红色。
关于SVG的更多信息和使用技巧，你可以参考腾讯云的SVG相关文档：SVG 图像介绍。
希望以上内容能够满足你的需求，如果还有其他问题，请随时提问。
相关·内容
我有一个svg图标，我想在悬停时用多种颜色给它上色。在这个例子中，我只想让加号轮廓在悬停时显示红色，因为图标的其余部分保持黑色。示例如下： .svg_icons{transition:0.3s;}fill:#000;
}<svg class='svg_icons'
浏览 24提问于2020-07-22得票数 0
回答已采纳
5回答
在悬停时，我很难更改SVG中特定元素的颜色。我需要在JS而不是CSS中这样做。在鼠标输出时，填充的颜色应该回到原来的颜色。这是一只小提琴
<
浏览 11提问于2022-11-02得票数 0
1回答
当下面的输入元素处于:悬停状态而不更改源SVG图像的时，是否可以更改svg内容的填充颜色？<input type="image" src="images/toolbar/check.svg" />首先，需要将输入元
浏览 1提问于2012-07-17得票数 2
回答已采纳
2回答
是否有一种方法可以更改用作游标的svg图像路径的填充颜色(如：cursor: url(cur/play.svg), auto;)？在悬停元素之前，我不知道它的颜色，所以它必须是CSS或JS解决方案(我不能预先做另一个svg )。
浏览 4提问于2014-05-27得票数 2
回答已采纳
我的设计中有一系列黑色/透明的SVG图标。我需要在悬停时将所有黑色填充和笔触更改为自定义颜色。.icons svg:hover {stroke:#dd6127;更新:正如Anders G所建议<em
浏览 0提问于2014-04-29得票数 8
回答已采纳
在悬停时的svg中，我可以更改组的不透明度，如何更改组中所有成员的填充颜色？当悬停在组中的任何元素上时，我希望更改组中所有成员的填充颜色。<svg version="1.1" baseProfile="
浏览 0提问于2013-11-03得票数 0
1回答
我想用javascript动态创建svg矩形。这些矩形应该是一种2D图形条，填充了多种背景颜色，就像这样：svg有没有可以处理多种背景颜色的形状？我不想使用多个矩形并试图定位它们...事件会更好，如果有一种堆栈面板，我可以放入子元素中…
因为我想把这些元素绑定到knockoutjs上。
浏览 10提问于2013-06-12得票数 4
回答已采纳
1回答
如何使svg组的所有元素在悬停时更改其填充颜色？.sgroup:hover {}<svg width="200" height="200">
<g class=&qu
浏览 3提问于2022-10-15得票数 0
回答已采纳
1回答
当我在SVG中悬停在路径上时，我试图改变路径的填充颜色。我似乎不能让它起作用。我认为这是一个z指数问题。我已经试过所有我能想到的选择器了。我已经更改了路径的顺序，因此它们是svg中的最后一个元素。我试图用类.wedge更改路径，我使用以下方法应用了全局z索引：然后在.wedge上，我增加了z索引：
.wedge
浏览 0提问于2017-11-08得票数 1
回答已采纳
1回答
我有一个带有一堆SVG元素的应用程序。当我在SVG元素上悬停时，它们暂时改变颜色，如果我单击其中一个，它就会永久地改变颜色(或者直到再次单击它)。单击SVG元素时，将调用以下代码：$(this).attr("class", styles);
CSS规则用颜色<e
浏览 5提问于2014-06-04得票数 0
回答已采纳
我能够成功地将Mapael map实现到我的HTML页面中，并且能够通过JavaScript代码根据我的喜好配置悬停填充颜色。 我正在尝试更改特定国家的填充颜色。我以前曾短暂地使用过SVG，并且我曾经使用文本编辑器打开一个文件并以这种方式更新某些元素。有没有不同的方法来做这件事？ 我想知道Mapael是否可以做到这一点？那么从哪里获取SV
浏览 30提问于2021-07-03得票数 0
回答已采纳
1回答
我想在我的网站中使用SVG图标，而且我知道使用<image>将限制我更改SVG属性的能力(例如，我不能在悬停时更改填充颜色)。我想找个方法.将svg保
浏览 5提问于2021-01-29得票数 1
我在一个外部文件symbols.svg中有一个SVG sprite，我使用如下代码将sprite中的图像插入到一个HTML文件中： <use xlink:href="symbols.svg#icon-twitter" />我想在悬停时更改svg图像的填充
浏览 4提问于2017-06-24得票数 1
回答已采纳
1回答
当您在父div上悬停时，尝试同时获得多边形填充颜色和文本填充颜色以更改。这可以通过CSS实现吗？希望避免使用javascript，并使其与浏览器兼容。以下是Codepen示例：
<g id="cta-button">
<polygon class=
浏览 0提问于2016-08-10得票数 4
回答已采纳
2回答
我正在开发一个使用Next JS的网站，我想显示一些SVG图标，这些图标是我使用Sanity存储的。如果我想动态地改变它的填充颜色(例如，当图标悬停时改变颜色)，我如何显示从Sanity CDN获得的SVG？或者这是不可能的？下面是我的代码摘要，只是为了向您展示我想做的事情：
const [icon, setI
浏览 19提问于2022-06-12得票数 1
回答已采纳
我想通过在卡片上悬停来改变字体的颜色。经过多次尝试后，我决定在这里张贴。如果我移除版式上的颜色，然后在卡片上悬停，它就会改变文字的颜色，在卡片上悬停。但我不想要默认的排版颜色，我想使用我的一种。
浏览 11提问于2022-03-15得票数 2
回答已采纳
我使用svg作为按钮的背景图像。
按钮需要不同的悬停状态，这些状态只是对svg填充值的更改。有没有一种聪明的方法可以对实际上只是用作图像的svg进行这些更改，或者我是否需要创建一个具有不同填充颜色的不同svg文件？
浏览 0提问于2013-11-05得票数 2
<img alt='PDF' src='document.svg' style=''>
在不使用CSS的情况下，在上面的样式属性中应该填充什么来更改svg悬停颜色？
浏览 5提问于2020-08-12得票数 1
1回答
我有一个浮动动作按钮，有一个SVG图标嵌套在下面，虽然它不是在FAB的子道具中。每当鼠标悬停在FAB/SVG图标上时，FAB就会变为淡灰色。我查看了和其他几个来源，发现悬停颜色是SVG图标颜色的40%。
是否可以删除悬停功能，这样就不会发生颜色更改，或者是否可以更改悬停产生的颜色以与
浏览 4提问于2016-06-01得票数 1
回答已采纳
如何在不将任何CSS代码放入SVG文件的情况下，更改对象标记内悬停时的svg填充颜色？下面是我的代码： <object data="http://useaible.com/wp-content/themes/storefront/assets/
浏览 6提问于2017-04-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
