Question

我正在尝试使用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>

Answer 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');
    });

});

更改SVG Fill Override On Click - jQuery

1 个答案: