Question

我有很多Svgs文件，我想用另一种替换一种特定的颜色。我没有路径ID并且在600多个文件中设置ID太长。所有文件都与示例中的两个文件具有相同的颜色。我想选择颜色为＃EB1A21的所有元素，并用包含另一种颜色的变量替换它们。我的svgs文件嵌入在对象html标签中。我不希望将结果保存在外部文件中，因为用户在输入类型=文本中设置了新颜色，因此我无法保存所有新的彩色Svg文件。我希望他们“动态”改变

我的文件格式是这样的

<svg>
  <g>
    <path style="fill:#EB1A21;" d="....."/>
    <path style="fill:#292B87;" d="....."/>
    <path style="fill:#EB1A21;" d="....."/>
  </g>
</svg>

我希望显示这样的文件：

<svg>
  <g>
    <path style="fill:#color1;" d="....."/>
    <path style="fill:#color2;" d="....."/>`
    <path style="fill:#color1;" d="....."/>
  </g>
</svg>

Ps：对不起我的语言我是法国人：）

提前致谢..

---- ----解

<script type="text/javascript">
    for (i in mySvgFiles){
        var curImage = escape(mySvgFiles[i]);
        $("#contents").append('<object data="file.svg" type="image/svg+xml" onload="selectObj(this);"><object/  >');
    }

    function selectObj(my_object){
        var colorChoice1 = "#FF0000"
        var colorChoice2 = "#00FF00"
        var svgDoc = my_object.contentDocument;
        var svgRootemp = svgDoc.documentElement;
        colorize(svgRootemp, colorChoice1, colorChoice2);
    }

    function colorize(svgRoot, color1, color2){
        $("[style='fill:#292B87;']",svgRoot).css("fill", color1);
        $("[style='fill:#EB1A21;']",svgRoot).css("fill", color2);
    }
</script>
<div id="contents"></div>

如果您对此有疑问，请问我：）

Answer 1

var color1 = "#00FF00";
var color2 = "#FF0000";

$(document).ready(function () {
    $("path").each(function () {
        var color = $(this).css("fill");
        if (color == "rgb(235, 26, 33)") {
            $(this).css("fill", color1);
        } else if (color == "rgb(41, 43, 135)") {
            $(this).css("fill", color2);
        }
    });
});

使用Javascript替换Svg文件中的颜色

1 个答案: