Fatal编程技术网

Javascript 外部svg的着色路径

javascript html css svg

Javascript 外部svg的着色路径,javascript,html,css,svg,Javascript,Html,Css,Svg,我正在寻找一种从外部文件为svg路径着色的方法，并找到了它。但它似乎对我不起作用 以下是我的文件的外观： <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>SVG test&l

我正在寻找一种从外部文件为svg路径着色的方法，并找到了它。但它似乎对我不起作用

以下是我的文件的外观：

<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测试
#图标{
宽度：500px；
高度：500px；
位置：绝对位置；
溢出：可见；
}
#图标#svg_容器{
前-000%；
宽度：100%；
身高：100%；
位置：绝对位置；
}
#图标#svg_容器路径{
填充：蓝色；
}
$（“img.svg”）。每个（函数（）{
var$img=$（此），
imgID=$img.attr（“id”），
imgClass=$img.attr（“类”），
imgURL=$img.attr（“src”）；
console.info（imgID+”，“+imgClass+”，“+imgURL）；
$.get（imgURL，函数（数据）{
//获取SVG标记，忽略其余部分
var$svg=$（数据）.find（“svg”）；
//将替换图像的ID添加到新SVG
if（imgID的类型！=“未定义”）{
$svg=$svg.attr（“id”，imgID）；
}
//将替换的图像类添加到新的SVG
if（imgClass的类型！=“未定义”）{
$svg=$svg.attr（“类”，imgClass+“替换svg”）；
}
//根据删除所有无效的XML标记http://validator.w3.org
$svg=$svg.removeAttr（“xmlns:a”）；
//用新SVG替换图像
$img.replaceWith（$svg）；
});
});
SVG文件包含如下路径

你能发现一个错误吗？或者这个方法只是被弃用了？我需要一个帮手。。。提前谢谢

我能够在一支代码笔中完成这项工作，我所做的唯一编辑就是找到另一个要加载的svg，因为没有提供您的svg，并根据我使用的图像调整样式


$（“img.svg”）.each（function（）
{
var$img=$（此），
imgID=$img.attr（“id”），
imgClass=$img.attr（“类”），
imgURL=$img.attr（“src”）；
console.info（imgID+”，“+imgClass+”，“+imgURL）；
$.get（imgURL，函数（数据）
{
//获取SVG标记，忽略其余部分
var$svg=$（数据）.find（“svg”）；
//将替换图像的ID添加到新SVG
if（imgID的类型！=“未定义”）
{
$svg=$svg.attr（“id”，imgID）；
}
//将替换的图像类添加到新的SVG
if（imgClass的类型！=“未定义”）
{
$svg=$svg.attr（“类”，imgClass+“替换svg”）；
}
//根据删除所有无效的XML标记http://validator.w3.org
$svg=$svg.removeAttr（“xmlns:a”）；
//用新SVG替换图像
$img.replaceWith（$svg）；
});
});
您可能希望将脚本重新排序，使其位于页面底部。如果您仍然有问题，请发布您的svg代码。

是的，就是这样！标题中的脚本是问题所在。。。谢谢：）祝你周末愉快！ 
<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>