別のアプローチをお勧めします: CSS を使用して色を変更します。そこでは SVG 要素をループする必要はありません。これを行うには、SVG ファイルを少しクリーンアップする必要があります。これにより、ファイルがよりコンパクトになります。
私が理解しているように、色付けされるすべての要素には、コンテンツと同じスタイル属性があります
font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel
それらの属性を削除し、適切なclass属性に置き換えます。これらのパスが地図上の国であるとしましょう。次に、それらに属性を与えましょうclass="country"。次に、次のような 1 つの CSS ルールを使用して、これらすべてのスタイルを設定します。
.country {
fill: #d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
font-sizeこれは要素とは無関係であるため、プロパティは省略しました<path>。(おそらく、多くのプロパティがデフォルト値を繰り返すため、これをさらに単純化できます。パスの親要素でこれらのプロパティを変更しない限りfill-rule、stroke-opacity、stroke-miterlimit、stroke-dasharray、stroke-linecapおよびmarker-startは冗長ですが、誰も傷つけません。)
もう 1 つ問題があります。ファイル内の ID が実際に0123、0456またはのように見える場合0789、それらは無効です。XML 名の規則に従う必要があるためです。XML 名は数字で始まってはなりません。ID を使用してこれらの要素のスタイルを設定しようとするとき、またはそれらを使用しようとすると、問題が発生することが予想さgetElementById()れます。id0123したがって、それらを次のように変更したい場合がありますid0456。id0789
これで、CSV データから CSS を動的に追加できるようになりました。
0123,0456,0789
になるだろう
#id0123,#id0456,#id0789 {fill:#FF0000}
これで完了です。CSS は SVG ファイルの要素に追加する<style>か、別の CSS ファイルを作成して SVG から参照することができます。この方法では、色を動的に変更するときに SVG を変更する必要はありません。SVG データを HTML でインラインで使用する場合、これを<style>HTML ページの要素または HTML によって参照される CSS ファイルに追加することもできます。