SVG - 单击按钮更改填充颜色答案

【问题标题】：SVG - Change fill color on button clickSVG - 单击按钮更改填充颜色
【发布时间】：2017-02-11 18:49:39
【问题描述】：

我做了一个简单的测试 svg-image。

我想制作切换按钮，所以当我点击 btn-test1 时，path1 将是 fill="#000" 和其他 "#FFF"。我将制作一张包含大约 40 条不同路径的地图，但我先尝试一下（不知道是否可能）？

这是目前的 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>

【问题讨论】：

document.getElementById('<path-id>').setAttribute('fill', '<new-fill-color>');??

标签： jquery svg

【解决方案1】：

您正在寻找fill 属性。

看这个小提琴：http://jsfiddle.net/P6t2B/

例如：

$('#btn-test1').on("click", function() {
    $('#path1').css({ fill: "#ff0000" });
});

【讨论】：

不错！工作得很好。正如我所提到的，我将制作一个包含大约 40 条不同路径的图像，并且想要 .toggle 填充。但是我使用了您的代码并对其进行了修改，现在效果很好（请查看我的编辑）
谢谢你一千次。我已经和这个愚蠢的代码斗争了几个小时，你修复了它。

【解决方案2】：

这样做（只是一个小例子）：

$(function(){
    $("#btn-test1").on("click",function(){
        $("#path1").attr("fill","#0000");   

    });
});

这将用#0000 填充路径1

【讨论】：

【解决方案3】：

    <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>

【讨论】：