Question

我正在拼命寻找解决方案，以便Chrome正确显示我的svg图标（颜色正确），而不是Safari。

感谢任何改进或提示。

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

谢谢！

  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;
}

Answer 1

SVG是否使用style属性设置填充颜色？例如：

style="fill: red"

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

＆＃13;

rect {
  fill: green;
}

＆＃13;

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

＆＃13;

要解决此问题，请使用CSS设置要设置样式的任何属性，并且：

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

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

1 个答案: