jQuery SVG - 单击按钮时更改填充颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20211890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG - Change fill color on button click
提问by Stichy
I've done a simple test svg-image.
我做了一个简单的测试 svg-image。
I would like to make toggle buttons so when I click on btn-test1, the path1 will be fill="#000" and the others "#FFF". I'm going to make a map with around 40 different paths, but I'm trying this first (don't know if it's possible) ?
我想制作切换按钮，所以当我点击 btn-test1 时，path1 将是 fill="#000" 和其他的“#FFF”。我打算用大约 40 条不同的路径制作地图，但我先尝试这个（不知道是否可能）？
Here's the HTML so far:
到目前为止，这是 HTML：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>
</div>
<button class="btn" id="btn-test1">Test 1</button>
<button class="btn" id="btn-test2">Test 2</button>
<button class="btn" id="btn-test3">Test 3</button>
EDIT: This javascript solved it
编辑：这个javascript解决了它
<script>
$('.btn').click(function() {
$('#path1, #path2, #path3').css({ fill: "#ffffff" });
var currentId = $(this).attr('id');
$('#path' + currentId +'').css({ fill: "#000" });
});
</script>
回答by Abhitalks
You are looking for the fillproperty.
您正在寻找该fill物业。
See this fiddle: http://jsfiddle.net/P6t2B/
看到这个小提琴：http: //jsfiddle.net/P6t2B/
For example:
例如：
$('#btn-test1').on("click", function() {
$('#path1').css({ fill: "#ff0000" });
});
回答by SeeTheC
Do this (just a small example ):
这样做（只是一个小例子）：
$(function(){
$("#btn-test1").on("click",function(){
$("#path1").attr("fill","#0000");
});
});
This will fill the path1 with #0000
这将用 #0000 填充 path1
回答by Leonardo Nunes
<script type="text/javascript">
$(document).ready(function()
{
//Redo XML
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
});
function changeColor(color)
{
//obj Father
$("#imgSvg").css("fill", color);
//objs children
$('#imgSvg').children().css('fill', color);
}
</script>
<img id="imgSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" src="imgTest.svg"/>
<br />
<br />
<button onclick="changeColor('#C0C0C0')">Gray</button>
<button onclick="changeColor('#FFF')">White</button>
<button onclick="changeColor('#000')">Black</button>
