0

I am searching for a way to color svg paths from an external file and found this tutorial from Drew Baker. But it does not seem to work for me.

This is how my files look like:

<html>
<head>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>SVG test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">
        #icon {
            width: 500px;
            height: 500px;
            position: absolute;
            overflow: visible;
        }
            #icon #svg_container {
                top: -000%;
                width: 100%;
                height: 100%;
                position: absolute;
            }
                #icon #svg_container path {
                    fill: blue;
                }
    </style>
    <script>
        $("img.svg").each(function () {
            var $img = $(this),
            imgID = $img.attr("id"),
            imgClass = $img.attr("class"),
            imgURL = $img.attr("src");
            console.info(imgID + ", " + imgClass + ", " + imgURL);

            $.get(imgURL, function (data) {
                // Get the SVG tag, ignore the rest
                var $svg = $(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);
            });
        });
    </script>
</head>
<body>
    <div id="icon">
        <img src="svg-sprite.svg" class="svg" id="svg_container" />
    </div>
</body>
</html>

The SVG-File contains paths like .

Can you spot an error or is this method simply deprecated? I could need a hand here... Thanks in advance!

Community
  • 1
  • 1
Yannic Welle
  • 207
  • 2
  • 10

1 Answers1

1

I was able to get this working in a code pen, the only edits I made were to find another svg to load since yours was not provided and adjust the style to the image I used.

http://codepen.io/justindunham/pen/yafsI

<div id="icon">
    <img src="svg-sprite.svg" class="svg" id="svg_container" />
 </div>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script>
    $("img.svg").each(function()
    {
        var $img = $(this),
        imgID = $img.attr("id"),
        imgClass = $img.attr("class"),
        imgURL = $img.attr("src");

        console.info(imgID + ", " + imgClass + ", " + imgURL);

        $.get(imgURL, function(data) 
        {
            // Get the SVG tag, ignore the rest
            var $svg = $(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);
        });
    });
</script>

You may want to re order your scripts to be at the bottom of your page. If you still have issues please post your svg code.

jdunham
  • 439
  • 3
  • 6