SVG-单击按钮即可更改填充颜色 [英] SVG - Change fill color on button click
本文介绍了SVG-单击按钮即可更改填充颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经做了一个简单的测试svg图像.
I've done a simple test svg-image.
我想创建切换按钮,所以当我单击btn-test1时,路径1将为fill =#000",其他名称为"#FFF".我将制作一张包含40条不同路径的地图,但我首先尝试进行此操作(不知道是否可行)?
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) ?
到目前为止,这是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>
此javascript解决了该问题
<script>
$('.btn').click(function() {
$('#path1, #path2, #path3').css({ fill: "#ffffff" });
var currentId = $(this).attr('id');
$('#path' + currentId +'').css({ fill: "#000" });
});
</script>
推荐答案
您正在寻找fill
属性.
查看此小提琴: http://jsfiddle.net/P6t2B/
See this fiddle: http://jsfiddle.net/P6t2B/
例如:
$('#btn-test1').on("click", function() {
$('#path1').css({ fill: "#ff0000" });
});
这篇关于SVG-单击按钮即可更改填充颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文