svgファイルの色が戻ってしまう

Question

javascript初心者です。

svgの色をjavascriptによって変更しました。
しかし、スマホ時の縦横の向きを変更した際、アイコンの色がjsを充てる以前の色に戻ってしまいます。

問題が発生しているサイト
https://www.unfondsolaire.com
(スマートフォンでの閲覧をお願いいたします。)
スクロールすると、下に固定ナビが出現します。アイコンの色がオレンジ色になっていると思いますが、スマホを横にし、その後再度縦にすると、アイコンの色がsvg本来の色(黄緑)に戻ってしまいます。その状態で再度スクロールすると、アイコンの色はオレンジ色に戻ってくれるのですが、そもそも黄緑色に戻らないようにしたいです。

発生している問題・エラーメッセージ

該当のソースコード

<ul>
      <li>
        <a href="tel:[phone]">
          <object id="tel" type="image/svg+xml" data="/wp-content/uploads/tel.svg" alt=""></object>
          <span>TEL</span>
        </a>
    </li>
    </ul>

function svgColor() {
var tel = document.getElementById('tel').contentDocument;
        var tel = $(tel);
        tel.find('path').css('fill','#f27d15');
  }

      $(window).load(function () {
        svgColor();
        $(this).resize(function () {
          svgColor();
            });
          });

試したこと

リサイズ時に色が戻ってしまうのなら、resiveファンクションで
再度命令を出してやればよいと思い、上記コードを書きました。
ですが、うまくいきません。
稚拙な質問で申し訳ありませんが、どなたかアドバイスを頂けると幸いです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

検証スマートフォン：iphone 6s
ブラウザ：safari

Answer 1

SVGを編集できるようでしたら、SVGファイルをテキストエディタで開いて、style要素内の記述を変更してはどうでしょうか。その場合、JavaScriptは全く必要ありません。

<style  type="text/css">
  .st0{fill:#89B928;}
</style>

↓

<style  type="text/css">
  .st0{fill:#f27d15;}
</style>

Answer 2

なぜ svgColor()をjavascriptで書いて、
その後の処理をjQueryで処理しているかは謎ですが
要はイベントの発火タイミングを"load"と"resize"に
限定すれば良いので、そのタイミングに発火を設定すれば良いと思います。

function svgColor() {
var tel = document.getElementById('tel').contentDocument;
    var tel = $(tel);
    tel.find('path').css('fill','#f27d15');
}

$(window).on('load resize', function(){
    svgColor();
});

ただその機能を切り分けて使うこともないかと思うので

$(function(){
    $('#tel').find('path').css('fill','#f27d15');
});

のみでも良いんじゃないかと思いますが、
何かしらで必要なのかもしれないので参考程度にしておいて下さい。

Comments

[_bg]

丁寧に教えていただきありがとうございます。
大変助かりました。

ご回答を参考にし、

$(window).on('load orientationchange resize',function () {
svgColor();
});

上記の記述を書きましたが、やはりうまくいってくれません。
因みにsvgの処理をjavascriptで記述しているのは、contentDocument　でないと
document内の要素を操作できない旨他ページに載っていたからです、、