Question

我的代码用于通过按钮更改SVG颜色。该代码适用于一种SVG，但不适用于所有其他SVG。

<text>First SVG not work</text>
<button type="button" id="Change_Blue_Circle">Change color</button>
<div id="my-div"></div>

new Vivus('my-div', {
  duration: 200,
  file: 'http://www.stirox.com/R/uploads/s.svg'
}, function() {
  alert(1);
});

$(document).on('click', '#Change_Blue_Circle', function(e) {
  e.preventDefault();

  $("#my-div svg:first path[fill='#42352c']").each(function(index) {
    $(this).css('fill', 'yellow');
  });
});

check my site

Answer 1

通过以下一项更改按钮单击的JS代码：

JS代码：

function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

$(document).on('click','#Change_Blue_Circle',function(e){
    e.preventDefault();
    $("#my-div svg:first path").each(function(index) {
        var fillCSSVal = '', attrFillVal = '', comparingColorValue = '#42352c';
        if( typeof $(this).css("fill") != 'undefined' ) {
            fillCSSVal = rgb2hex($(this).css("fill")).toString().toLowerCase();
        }
        if( typeof $(this).attr('fill') != 'undefined' ) {
            attrFillVal = $(this).attr('fill').toString().toLowerCase();
        }

        if( fillCSSVal == comparingColorValue || attrFillVal == comparingColorValue ) {
            $(this).css('fill', 'yellow');
        }
    });
});

$(document).on('click','#Change_Green_Circle',function(e){
    e.preventDefault();
    $("#my-div2 svg:first path").each(function(index) {
        var fillCSSVal = '', attrFillVal = '', comparingColorValue = '#9cca15';
        if( typeof $(this).css("fill") != 'undefined' ) {
            fillCSSVal = rgb2hex($(this).css("fill")).toString().toLowerCase();
        }
        if( typeof $(this).attr('fill') != 'undefined' ) {
            attrFillVal = $(this).attr('fill').toString().toLowerCase();
        }

        if( fillCSSVal == comparingColorValue || attrFillVal == comparingColorValue ) {
            $(this).css('fill', 'red');
        }
    });
});

脚本将检查带有路径元素的SVG是否具有直接属性作为“填充”或具有具有“填充”属性的css作为必需的颜色值。

函数rgb2hex将根据rgb值给出十六进制颜色值，该引用取自JS Fiddle：https://jsfiddle.net/Mottie/xcqpF/1/light/

E.G。 rgb（255，255，255）将返回为#fffff

通过按钮单击更改SVG颜色不适用于所有SVG图片| jQuery

1 个答案: