fill path of svg icons is not working on Safari but on Chrome

enter image description hereI 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

Thanks!

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

1 answer

  • answered 2018-01-12 07:01 Paul LeBeau

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

    style="fill: red"
    

    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>

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

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