私が作ろうとしているサイトでは、SVGでアニメーションをさせるわけでもないし、動的にSVGを描くわけでもありません。
完成しているSVGに対して、JavaScriptで色を変えたいだけ。
なのでSVGの基本的なことがわかれば、後はJavaScript（＆CSS）との戦いなことに気が付きました。
あと画像を重ねあわせてPNG画像として保存できるようにするため、そこはCanvasを利用しようかなぁと考えています。
現在の進捗状況。
◎インラインSVGを表示
◎カラーパレットをクリックした時にSVGの色を変更する
◎リセットボタンクリックでデフォルトの色に戻す
色の変更方法ですが、最初はループ処理でSVG要素を取得してはsetAttribute(“fill”, 色)としていました。
ですがこれだとデフォルトの色が上書きされてわからなくなってしまうので、setAttribute(“style”, “fill:色;”)としてスタイル属性を追加することにしました。
デフォルトに戻す時は、removeAttribute(“style”)で削除します。
ただ、このremoveAttributeの処理が恐ろしいほどに時間がかかりました。
試しにSVG要素を1000個にします。
パソコンだとこれでも一瞬で処理が終わりますが、モバイルで見てみると…setAttributeの時は1秒くらいで耐えられますが、removeAttributeの処理は8秒もかかりました。
（1000個ものSVG要素を処理する、ということ自体を検討する必要もありますが…）
CSSを書き換えられれば、その1箇所を変えるだけで済むのになぁ。
でもどうも、JavaScriptでCSS（外部スタイルシートもしくはstyleタグ）を書き換えることってメジャーではないんですね。できることはできるけど、特殊というか…。
色ごとにクラススタイルを用意して、SVG要素のクラス名を書き換える、という方法もあるのですが、結局これも全てのSVG要素をループしているので、変わりないかなと。。
ちなみに検索して見つけたCSSを書き換えるスクリプトを使用してみたら、劇的に処理時間が短くなりました！
（一箇所書き換えるだけですもんね）
ひとまずこれで進めます。
コメント