如何用JS控制svg的背景色？

Posted 2023-04-23

我们平时用的背景色代码是“backgroundColor”，但是svg的的背景色代码是“fill”,
我想在下面代码中加入能控制svg背景色的代码，
比如说：<svg> <path class="sw1" style="display:none;" d="M1 -0.0001l200 0c0.55,0 1.0001,0.45 1.0001,0.9999l0 10.0001c0,0.5499 -0.4501,1 -1.0001,1l-200 0c-0.55,0 -1.0001,-0.4501 -1.0001,-1l0 -10.0001c0,-0.5499 0.4501,-0.9999 1.0001,-0.9999z"/> </svg>

<script type="text/javascript">
$(document).ready(function()
$("#b1p").click(function(e)
$("#b1e").toggle();
e.stopPropagation();
);
$(document).click(function()
$("#b1e").hide();
);
);
$(function()
var col = "";
var val = "";
$(".1bcolor_selectGroups").find("li").each(function(index)
$(this).click(function()
col = $(this).css("backgroundColor");
text = $(this).text();
console.log(col+"---"+text);
);
);
$("#b1p").click(function()
$("#bc1").val(text);
$("#attrib_3_0").val(text);
);
$("#b1e").click(function()
$("#outside_show").css("backgroundColor",col);
$("#inside_show").css("backgroundColor",col);
$("#segmented_c1_outside").css("backgroundColor",col);
$("#segmented_c1_inside").css("backgroundColor",col);
$("#b1e").hide();
$("#b1clear").show();
);
);
</script>

参考技术A $("#inside_show").css("backgroundColor",'rgba(59, 14, 14, 0.45)');这样可以吗追问

不对呀，svg必须要使用“fill”指令来填充背景色的，
还有，我忘记说了，好像"fill"指令必须要使用rgb十六进制的颜色，即是#ffffff

追答

如果颜色是这个#ffffff 你可以直接在后面写颜色字符串就ok了。。

jquery 好像是这样写的，$("#inside_show").css("background-color", "#e5e5e5")你可以试下。。 实在不行你就在css定义样式给那个div添加个class 这个是最简单的，希望你能帮助你

追问

颜色不是#ffffff，
可能是我贴出来的代码不够全，
我有很多个颜色要手动选择的，然后把选择的颜色通过JS改变svg的背景色的，
我已经试过，不能用background-color，一定要用 fill 命令的，

要改变的svg背景色是：class="sw1"

追答

能得到svg 然后去设置他的fill 吗

追问

可以的，已经有svg的内容，只是不知道怎么用js改变它的背景色,

本回答被提问者和网友采纳 参考技术B 这么做 $("#segmented_c1_inside").attr("fill","red")

如何用js或者css实现，鼠标经过的时候背景色变化，停留在这页时，背景色还是变化后的颜色

如何用js或者css实现，鼠标经过的时候背景色变化，停留在这页时，背景色还是变化后的颜色，点击到下个界面的时候，此界面恢复原来，点击的页面变色！

用hover，比如你要div某个div背景变色，用 类名：hoverbackground:#ff6a00; 或者是 id：hoverbackground:#ff6a00; 这样就行了，鼠标放开背景色就自动变化回去了。 参考技术A 南京哪家体 参考技术B 为什么每天都