svg图标的填充路径不适用于Safari，但适用于Chrome

问题描述

我急切地想寻找一种解决方案，为什么Chrome无法正确显示我的svg图标(以正确的颜色显示)，而Safari无法正确显示我的svg图标.

I am desperately looking for a solution why Chrome is displaying my svg icons correctly (in the correct color) and Safari not.

任何改进或提示都值得赞赏.

Any improvements or hints are appreciated.

请询问我的问题是否仍然不清楚

Please ask if something remains unclear about my issue

谢谢！

  Script for transforming svg into inline svg

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function() {
        $('img[src$=".svg"]').each(function() {
            var $img = jQuery(this);
            var imgURL = $img.attr('src');
            var attributes = $img.prop("attributes");

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

        // Loop through IMG attributes and apply on SVG
        $.each(attributes, function() {
            $svg.attr(this.name, this.value);
        });

        // Replace IMG with SVG
        $img.replaceWith($svg);
            }, 'xml');
        });
        });
    </script>


    HTML code

    <div id="icon-bar">
    <ul id="navbaricons">
        <li><a href="index.html"><img src="bildernavbar/Logo.svg" alt="Logo" width="22" height="23"></a></li>
        <li><a href="search.html"><img src="bildernavbar/search.svg" alt="Search" width="21" height="23"></a></li>
        <li><a href="like.html"><img src="bildernavbar/heart.svg" alt="Heart" width="23" height="23"></a></li>
        <li><a href="annonce.html"><img  src="bildernavbar/annonce.svg" alt="upload" width="35" height="23"></a></li>
        <li><a id="profile" href="profile.html"><img src="bildernavbar/user.svg" alt="Profil" width="23" height="23"></a></li>
    </ul>
</div>


CSS

#navbaricons path {
    fill: #323b4a;
}

#navbaricons:hover path {
    fill: white;
}

推荐答案

SVG是否使用 style 属性设置其填充颜色?例如:

Do the SVGs set their fill colours using the style attribute? For example:

style="fill: red"

style 属性的优先级高于CSS规则.在下面的示例中比较两个矩形.

style attributes have higher precedence than CSS rules. Compare the two rectangles in the following example.

rect {
  fill: green;
}

<svg>
  <rect width="100" height="100" style="fill: red"/>
  <rect x="120" width="100" height="100" fill="red"/>
</svg>

要解决此问题，请获取您要使用CSS设置样式的所有属性，并选择其中一个:

To fix this, take any properties you want to style with CSS, and either:

• 将它们从 style 属性中完全删除，或
• 将它们更改为演示文稿属性.例如. fill ="red" .

• remove them from the style attribute completely, or
• change them to presentation attributes. Eg. fill="red".

这篇关于svg图标的填充路径不适用于Safari，但适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！