单击时更改 SVG 填充覆盖 - jQuery答案

【问题标题】：Change SVG Fill Override On Click - jQuery单击时更改 SVG 填充覆盖 - jQuery
【发布时间】：2014-01-14 13:42:40
【问题描述】：

我正在尝试使用 jQuery 单击事件处理程序更改 SVG 对象的颜色，但单击后颜色恢复正常。

如何永久更改颜色？

<svg>
   <line class = "A1" fill="none" stroke="#000000" stroke-width="3.8417" x1="73.208" y1="73.341" x2="99.923" y2="73.341"/>

    <polygon class = "A1" 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>

<script>
    $(document).ready(function() {
        $(".A1").mouseover(function(){
            $(".A1").css('fill', '158844');
            $(".A1").css('stroke', '158844');
        });

        $(".A1").mouseout(function(){
            $(".A1").css('fill', '#000000');
            $(".A1").css('stroke', '#000000');
        });

        $(".A1").click(function(){
            $(".A1").css('fill', '158844');
            $(".A1").css('stroke', '158844');
            $("#appearOnAcross").show();
            $("#appearOnDown").hide();
            alert('jQuery Alert')
        });

    });
</script>

【问题讨论】：

标签： javascript jquery css svg

【解决方案1】：

问题：mouseout。在click mouseout 发生后重置您的颜色。

解决方案：使用标志。

演示：http://jsfiddle.net/abhitalks/6wwUm/1/

JS：

$(document).ready(function () {

    var flag = true; // take a flag here

    $(".A1").mouseover(function () {
        if (flag) { // check flag before change
            $(".A1").css('fill', '158844');
            $(".A1").css('stroke', '158844');
        }
    });

    $(".A1").mouseout(function () {
        if (flag) { // check flag before change
            $(".A1").css('fill', '#000000');
            $(".A1").css('stroke', '#000000');
        }
    });

    $(".A1").click(function () {
        flag = false; // reset flag
        $(".A1").css('fill', '158844');
        $(".A1").css('stroke', '158844');
    });

});

【讨论】：