Question

我正在寻找一种从外部文件中着色svg路径并找到this tutorial from Drew Baker的方法。但它似乎对我不起作用。

这就是我的文件的样子：

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

SVG文件包含类似。

的路径

您是否可以发现错误或者此方法是否已弃用？我可能需要一只手......提前致谢！

Answer 1

我能够在代码笔中使用它，我所做的唯一编辑是找到另一个svg加载，因为没有提供你的，并调整样式到我使用的图像。

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>

您可能需要重新订购脚本，使其位于页面底部。如果您仍有问题，请发布您的svg代码。

来自外部svg的着色路径

1 个答案: