如何通过单击按钮改变SVG元素的颜色？
如何通过单击按钮改变SVG元素的颜色？
提问于 2016-09-30 09:58:50
我试过toggleClass，切换，但这不起作用。目标是:有一个白色元素。我们点击一个按钮，元素变成蓝色。我们再次单击一个按钮，元素再次变为白色。测试3
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-30 10:10:08
根据jQuerys发布说明，SVGs的类操作直到3.0：https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/版本才被支持。
因此，如果您使用jQuery 3.0 (或更高版本)或使用.attr()方法自己操作类，那么它应该可以工作：
somejQueryElement.attr('class', 'new-value')
我在这里做了一个基本的例子：
http://jsfiddle.net/MattDiMu/q67h7bmf/
Stack Overflow用户
发布于 2016-09-30 10:15:05
$(document).ready(function () {
var flag = true; // take a flag here
$(".S1").mouseover(function () {
if (flag) { // check flag before change
$(".S1").css('fill', '158844');
$(".S1").css('stroke', '158844');
}
});
$(".S1").mouseout(function () {
if (flag) { // check flag before change
$(".S1").css('fill', '#000000');
$(".S1").css('stroke', '#000000');
}
});
$(".S1").click(function () {
flag = false; // reset flag
$(".S1").css('fill', '158844');
$(".S1").css('stroke', '158844');
});
});<svg>
<line class = "S1" fill="none" stroke="#000000" stroke-width="3.8417" x1="73.208" y1="73.341" x2="99.923" y2="73.341"/>
<polygon class = "S1" points="97.23,82.618 97.176,72.229 97.121,61.843 106.145,66.987 115.169,72.136 106.2,77.377 "/>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39788795
复制相关文章
相似问题
腾讯云开发者
