如何在悬停状态下巧妙地更改多个svg颜色
在悬停状态下巧妙地更改多个SVG颜色可以通过CSS和JavaScript来实现。下面是一种常见的方法：
- 使用CSS选择器选中需要更改颜色的SVG元素。可以使用类名、ID或其他属性选择器来选中目标元素。
- 使用CSS的:hover伪类来定义鼠标悬停状态下的样式。在:hover伪类中，可以使用CSS的fill属性来更改SVG元素的填充颜色。
- 如果需要更改多个SVG元素的颜色，可以使用CSS的类选择器或后代选择器来选中这些元素，并在:hover伪类中定义不同的颜色。
示例代码如下：
HTML:
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>CSS:
.svg-icon {
fill: #000; /* 初始颜色 */
}
.svg-icon:hover {
fill: #ff0000; /* 悬停状态下的颜色 */
}在上面的示例中，两个SVG元素都具有相同的类名"svg-icon"，并且初始颜色为黑色。当鼠标悬停在SVG元素上时，填充颜色将变为红色。
对于更复杂的SVG图形，可以使用JavaScript来更改颜色。以下是一个使用JavaScript和jQuery库的示例：
HTML:
<svg id="svg1" viewBox="0 0 24 24">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
<svg id="svg2" viewBox="0 0 24 24">
<path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>JavaScript (使用jQuery库):
$(document).ready(function() {
$('#svg1').hover(function() {
$(this).find('path').css('fill', '#ff0000'); /* 悬停状态下的颜色 */
}, function() {
$(this).find('path').css('fill', '#000'); /* 恢复初始颜色 */
});
$('#svg2').hover(function() {
$(this).find('path').css('fill', '#00ff00'); /* 悬停状态下的颜色 */
}, function() {
$(this).find('path').css('fill', '#000'); /* 恢复初始颜色 */
});
});在上面的示例中，通过使用jQuery库，我们可以通过ID选择器选中不同的SVG元素，并在鼠标悬停和离开时使用css()方法来更改填充颜色。
这是一种在悬停状态下巧妙地更改多个SVG颜色的方法。根据具体的需求和场景，可以根据SVG元素的结构和样式来调整代码。
相关·内容
3回答
在父div悬停时填充SVG (无JS)
html、css、svg
我有2个SVG路径，我想当用户滚动他们的父母时，他们会改变填充颜色。只有当用户在svg上悬停时，我才能让悬停起作用。我知道使用JS很容易，但我更喜欢坚持使用CSS。
<div class="button">
<svg width="100px" height="100px">
<circle cx="30" cy="30" r="20" style="stroke: black;"/>
</svg>
</
浏览 4提问于2013-11-08得票数 2
2回答
一个页面上有多个SVG
javascript、svg
我的页面上有多个SVG(它们也可以使用加号或减号图像动态添加)。即：
<img src="/svgs/mysvg.svg" id="svg1">
<img src="/svgs/mysvg.svg" id="svg2">
<img src="/svgs/mysvg.svg" id="svg3">
在mysvg.svg内部，有一个id为circle的path元素。当我只在页面上显示1SVG时，我可以使用以下javascript来更改#circle的颜色：
$(
浏览 0提问于2016-02-05得票数 1
3回答
如何在SVG矩形中的选择器之前或之后添加？
html、css、svg
我正在尝试用SVG创建一个图表，并用PHP操作数据-数字，当SVG矩形显示数据属性时，我想悬停。但它在“rect”中的::after或：：But选择器中不起作用。我的问题是:可以将这些选择器::after和：：rect放在'rect'，'circle‘或'polyline’中吗？ <html>
<head>
<style>
svg{
height:100vh;
}
rect{
pointer-events: all;
}
rect:hover:after{
content: attr(data-h
浏览 30提问于2019-09-22得票数 1
回答已采纳
1回答
如何降低顺风css背景图像的不透明度？
css、flexbox、background-image、tailwind-css、opacity
我在顺风CSS中使用flex来设计上面的部分。我已经放置了一个反应标志的背景图像在这一部分。我试图通过“不透明度-25”级的顺风来改变背景图像的不透明度，但是它改变了整个部分的不透明度。请为这个问题提出一个可行的解决办法。
注：线性梯度不适用于这里，因为它将应用于整个页脚并影响整个背景。我只想改变反应标志的不透明度。我使用自定义类作为“基础”。这里的“基础- 40%”指的是40%的柱子宽度。
<div class="flex">
<!-- First col -->
<div class="flex flex
浏览 3提问于2022-10-23得票数 1
1回答
斑马条纹表格内的SVG按钮不继承背景颜色
html、css
在普通的HTML5和CSS中，我想在斑马条纹表格中设置一些按钮的样式。按钮的背景颜色应与每个单元格的背景颜色相同。我原以为按钮的背景颜色是从父<td>继承的，但显然不是。 这是我当前的结果，你可以看到第二行的按钮应该是白色的背景，而不是灰色的： ? 生成此代码的代码为： <html>
<head>
<style type="text/css">
table {
width: 50%;
border-collap
浏览 37提问于2021-11-05得票数 0
回答已采纳
1回答
一页d3.js上的多个简单图
javascript、csv、d3.js
我使用的是d3.js，我试图在同一个页面中显示多个图形。虽然d3.js代码是same.The，但一个图表来自Measurements.csv，另一个来自m1.csv。
<!DOCTYPE html>
<svg width="1000" height="500"></svg>
<style> /* set the CSS */
.grid line {
stroke: aquamarine;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
浏览 0提问于2017-07-27得票数 1
1回答
如何在两个单独的SVG图像中填充多个相似的路径？
javascript、animation、svg、vue.js
我正在制作网站，用户与svg交互，并在点击时填充其颜色，我设法使路径填充单击，但我目前的问题是，因为有2个svg，当你点击填充一些路径在svg1上，有时svg2路径也需要填充。我考虑在svg中添加一些类，然后检查svg1路径是否与svg2路径具有相同的类，然后根据该条件填充两个路径。我想知道是否有一些更简单的way.Also，并不是所有的路径都应该填充相同的颜色，只有一些，而且我没有看到任何模式。我还想添加一些元数据，但这可能会使事情变得更加复杂。
mounted() {
let self = this;
this.$nextTick(() => {
浏览 0提问于2018-12-03得票数 0
回答已采纳
1回答
我遇到过：
但我想将内联SVG嵌入到同一页面的内联SVG中。这是一个CodePen文件，但我在这里复制了它。
我想看到两个LinkedIn图标，但现在我没有看到第二个。
body { transition: all .3s ease; }
/* Set icon size */
.svg-icon svg {
width: 50px;
height: 50px;
color: white;
}
.svg-icon svg > g rect {
fill: gray;
}
.svg-icon svg > g circle {
fill: gray;
}
浏览 4提问于2022-11-17得票数 0
1回答
为什么要移除悬停状态行为？
javascript、css、d3.js、svg
我有一个D3生成的地图，需要能够动态改变绘制路径的填充元素。生成原始路径，并为其分配一个“边界”类。当用户将光标悬停在国家上时，悬停行为被设置为将国家变为黄色。但是，如果我随后动态更改国家/地区的填充颜色，例如通过使用d3.selectAll- (我简化了下面的示例，以便通过取消注释最后一节来模拟此行为)，悬停行为将停止工作。类没有改变，那么为什么悬停行为现在没有发生。有没有解决这个问题的办法？ CSS .countryMap{
width: 500px;
height: 500px;
position: relative;
}
.boundaries{
fill:green;
}
浏览 14提问于2019-09-28得票数 0
回答已采纳
2回答
使用file_get_contents后将类添加到SVG元素
php、html、svg
我需要获取一个SVG图像并将图像插入到页面中。我使用以下方法获取图像：
<?php echo file_get_contents("logo.svg"); ?>
，它输出类似于
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"">
<path d="M12 2c5.514 0 10 4.486"></path>
</
浏览 5提问于2016-02-13得票数 4
回答已采纳
3回答
否定填充:currentColor
css、svg
有没有办法否定或删除fill: currentColor？
.svg-icon * {
/* Targets all sub-elements so we can deliver icons with a color override of our choice */
fill: currentColor;
}
.svg-icon.iconLogoGlyph * {
/* How do I negate fill: currentColor further down the cascade? */
fill: inherit;
/* I want the natur
浏览 0提问于2017-06-01得票数 8
3回答
将多个HTML元素组合到一个CSS类中，以显示选定状态
html、css、angular
我对css比较陌生。我有ul和一些li元素，每个li元素都包含SVG和p element.when，li被选中了，我想将样式添加到这些li和SVG,p元素中。
<ul>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0
浏览 0提问于2019-07-24得票数 0
回答已采纳
2回答
利用DOM操作改变SVG笔画颜色
javascript、html、css、svg
我的肚脐内有一条垂直线SVG，我想用DOM操作在滚动时改变它的笔画颜色。
我可以在滚动时改变肚脐的背景色，也可以用DOM操作改变SVG行的宽度，但是不能改变笔画颜色，我使用了很多方法，但是没有人在工作。
请帮助我一样，我提供我的SVG代码和JavaScript代码也。
我的SVG图像代码：-
<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" xmlns="http://www.w3.org/2000/svg"&
浏览 2提问于2021-09-05得票数 1
回答已采纳
2回答
如何使用.css标记禁用<style>文件中的悬停样式？
javascript、html、jquery、css
我正在使用一个名为Docfx的文档生成器，它包含自己的css文件。其中一个条目是，
svg:hover path {
fill: #ffffff;
}
当我在svg上悬停时，我不想改变样式，所以我想禁用它。因为我没有修改这个css文件的权限，所以我唯一的选择就是使用<style>。
我通过改变填充颜色来测试<style>方法，它起了作用。现在，我想不出如何禁用这个填充。
<style>
svg:hover path {
<!--fill: #AAAfff;-->
}
</style>
注意:我还可以添加jque
浏览 9提问于2022-09-03得票数 0
1回答
从下到上填充SVG核心
html、css、svg
我需要用一句话来填充这颗svg的心:从下到上悬停，有人能帮帮我吗？
<svg class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 24 24"
<path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.
浏览 4提问于2021-02-20得票数 1
1回答
使用scss变量进行SVG着色
javascript、css、variables、svg、gradient
我想使用SVG图像，并使用像$blue这样的scss变量给它着色。
如果我将SVG代码粘贴到HTML中，它可以正常工作。但是我将使用多个这样的SVG文件，并且我不希望我的HTML文件看起来很复杂。
所以我尝试使用其他方法，比如直接粘贴SVG url和在SVG文件中定义颜色变量。
HTML
<!-- EXAMPLE 1 -->
<svg id="triangle" width="448" height="414" viewBox="0 0 448 414" fill="none" xmlns=&#
浏览 0提问于2021-01-31得票数 0
2回答
是否有可能在SVG fill=url(#)中使用动态id
html、css、angular、svg、linear-gradients
我正在创建一个svg图标来填充来自linearGradient的颜色百分比。
在linearGradient中，我动态地创建id，并希望使用相同的动态创建的id
我尝试了插值fill={url(#linear${i})}，它没有工作，也不确定这是否是在SVG中使用的正确方法。
是否有更好的方法来实现这一点？
<div *ngFor="let block of filteredBlocks; let i = index">
<svg xmlns="http://www.w3.org/2000/svg"
height=&#
浏览 13提问于2022-01-21得票数 1
回答已采纳
1回答
使用CSS时SVG不会改变颜色
html、css、svg
因此，我有以下SVG图像：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<title>ic_toggle_on_1</title>
<style>
.circle {
fill:#3165bd;
}
</style>
<path class="circle" d="M8
浏览 0提问于2018-03-20得票数 0
2回答
利用尾风实现悬停的SVG彩色填充
html、css、svg、tailwind-css
我一直试图让我的svg填补黑色悬停，但似乎无法做到。
我想要像这样的黑色轮廓
。
然后像这样填入
。
这是我希望在悬停时填充它的代码。然而，它并不完全起作用。如果我把hover:从hover:fill-current上取下来，那么它一直都是黑色的。
<svg class="h-6 w-6 text-black hover:fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="curr
浏览 0提问于2020-12-01得票数 8
回答已采纳
2回答
使用SVG图标
css、svg
我正在使用我自己的SVG图标，并试图找到使用它们的最佳方式。 我想保持颜色，但也调整它，如果需要匹配主题或在使用悬停时。 我曾尝试使用以下脚本将以下内容更改为嵌入式SVG，但当我在HTML文档的底部加载脚本时，我得到了可怕的跳转效果。 $(function(){
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
v
浏览 20提问于2019-03-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
