Question

我想使用CSS更改SVG img的颜色。

我正在使用此代码，但无法正常工作..........

<img class="svg analyt" src="icons/Icons/analysis.svg">


<svg xmlns="http://www.w3.org/2000/svg" height="937pt" version="1.1" viewBox="0 -15 937.5 937" width="937pt">
<g id="surface1">
<path d="M 234.375 500.25 L 46.875 500.25 C 20.992188 500.25 0 521.242188 0 547.125 L 0 859.625 C 0 885.507812 20.992188 906.5 46.875 906.5 L 234.375 906.5 C 260.257812 906.5 281.25 885.507812 281.25 859.625 L 281.25 547.125 C 281.25 521.242188 260.257812 500.25 234.375 500.25 Z M 250 859.625 C 250 868.257812 243.007812 875.25 234.375 875.25 L 46.875 875.25 C 38.242188 875.25 31.25 868.257812 31.25 859.625 L 31.25 547.125 C 31.25 538.492188 38.242188 531.5 46.875 531.5 L 234.375 531.5 C 243.007812 531.5 250 538.492188 250 547.125 Z M 250 859.625 " style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" />
<path d="M 890.625 344 L 703.125 344 C 677.242188 344 656.25 364.992188 656.25 390.875 L 656.25 859.625 C 656.25 885.507812 677.242188 906.5 703.125 906.5 L 890.625 906.5 C 916.507812 906.5 937.5 885.507812 937.5 859.625 L 937.5 390.875 C 937.5 364.992188 916.507812 344 890.625 344 Z M 906.25 859.625 C 906.25 868.257812 899.257812 875.25 890.625 875.25 L 703.125 875.25 C 694.492188 875.25 687.5 868.257812 687.5 859.625 L 687.5 390.875 C 687.5 382.242188 694.492188 375.25 703.125 375.25 L 890.625 375.25 C 899.257812 375.25 906.25 382.242188 906.25 390.875 Z M 906.25 859.625 " style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" />
<path d="M 562.5 422.125 L 375 422.125 C 349.117188 422.125 328.125 443.117188 328.125 469 L 328.125 859.625 C 328.125 885.507812 349.117188 906.5 375 906.5 L 562.5 906.5 C 588.382812 906.5 609.375 885.507812 609.375 859.625 L 609.375 469 C 609.375 443.117188 588.382812 422.125 562.5 422.125 Z M 578.125 859.625 C 578.125 868.257812 571.132812 875.25 562.5 875.25 L 375 875.25 C 366.367188 875.25 359.375 868.257812 359.375 859.625 L 359.375 469 C 359.375 460.367188 366.367188 453.375 375 453.375 L 562.5 453.375 C 571.132812 453.375 578.125 460.367188 578.125 469 Z M 578.125 859.625 " style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" />
<path d="M 582.703125 323.796875 C 588.808594 329.894531 598.691406 329.894531 604.796875 323.796875 L 875 53.59375 L 875 78.375 C 875 87.007812 881.992188 94 890.625 94 C 899.257812 94 906.25 87.007812 906.25 78.375 L 906.25 15.875 C 906.210938 14.007812 905.851562 12.160156 905.15625 10.414062 C 904.941406 9.890625 904.695312 9.371094 904.433594 8.851562 C 903.847656 7.691406 903.117188 6.597656 902.25 5.609375 C 900.855469 3.882812 899.070312 2.519531 897.03125 1.640625 C 896.882812 1.640625 896.78125 1.460938 896.636719 1.414062 C 894.902344 0.726562 893.066406 0.359375 891.207031 0.324219 C 890.96875 0.359375 890.816406 0.25 890.625 0.25 L 828.125 0.25 C 819.492188 0.25 812.5 7.242188 812.5 15.875 C 812.5 24.507812 819.492188 31.5 828.125 31.5 L 852.90625 31.5 L 593.75 290.65625 L 456.359375 153.265625 C 450.253906 147.167969 440.371094 147.167969 434.265625 153.265625 L 273.4375 314.09375 L 198.546875 239.203125 C 192.441406 233.105469 182.558594 233.105469 176.453125 239.203125 L 35.828125 379.828125 C 31.765625 383.746094 30.136719 389.5625 31.566406 395.023438 C 33 400.488281 37.261719 404.75 42.726562 406.183594 C 48.1875 407.613281 54.003906 405.984375 57.921875 401.921875 L 187.5 272.34375 L 262.390625 347.234375 C 268.496094 353.332031 278.378906 353.332031 284.484375 347.234375 L 445.3125 186.40625 Z M 582.703125 323.796875 " style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" />
</g>
</svg>


.analyt path {
  fill: #fff;
}

我使用了此JQuery代码，但它也无法正常工作....................... ................. .....


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

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

使用SVG src更改img的颜色

0 个答案: