用 Javascript 替换 Svg 文件中的颜色

Question

我有很多 Svgs 文件，我想用另一种颜色替换一种特定颜色。 我没有路径 id，并且在 600 多个文件中设置的 id 太长了。 所有文件的颜色都与示例中的两个文件相同。我想选择颜色为#EB1A21 的所有元素，并将它们替换为包含另一种颜色的变量。我的 svgs 文件嵌入在对象 html 标记中。 我不想将结果保存在外部文件中，因为新颜色是由用户在 input type=text 中设置的，所以我无法保存所有新的彩色 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);
        }
    });
});