CODEWITHSUNDEEP
jquerysvgfill
Jakob
Jakob

Reputation: 205

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

Upvotes: 0

Views: 5739

Answers (2)

Dale Anderson
Dale Anderson

Reputation: 1711

You may also need to explicitly set the height and width attributes explicitly on the SVG element for it to display correctly on Safari. Both absolute values and percentages seem to work.

<svg viewport="..." height="100%" width="100%">...</svg>

Upvotes: 5

Paul LeBeau
Paul LeBeau

Reputation: 101938

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".

Upvotes: 1

Related Questions