Question

我正在尝试填充我的svg，并且在chrome和IE中一切正常，但是在Firefox中却无法正常工作。在Firefox中，我可以在检查时看到样式，但没有得到颜色。如果我尝试仅在CSS中保留没有社交链接类的路径，则它可以工作，但我希望它与.social-link路径之类的父类一起使用。预先谢谢你。

 $(document).ready(function() {
  jQuery('.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');

    });
 })

.social-link path {
    fill: #ee44ff;
}

<img id="facebook-logo" class="svg social-link" src="images/facebook.svg">

Answer 1

而不是通过img标签访问svg。您能否在任何编辑器中打开SVG图片，复制代码并将其粘贴到html中。然后将class添加到path并应用CSS。它将解决您的问题。注意在代码中，请确保检查路径不具有fill =“ none”之类的属性。如果可以，请删除它。

svg fill在Firefox中不起作用

1 个答案: