SVG でも、innerHTML できるようにする Polyfill

あるんですね。https://github.com/dnozay/innersvg-polyfill
Polyfill 所謂、まだ機能が追いついてないブラウザに対して補うためのライブラリ、
これを使うと IE９以降でもSVGタグで、innerHTML を実行できます。
github サイトから、配布してる innersvg.js をダウンロードして配置して読み込むか、
あるいは CDN サイトを指定するか。。。

<script src="https://cdn.jsdelivr.net/npm/innersvg-polyfill@0.0.2/innersvg.min.js"></script>

先日の問題、
Tabulator のチェックONOFFデザインを持ってくる。（１） - Oboe吹きプログラマの黙示録
と
Tabulator のチェックONOFFデザインを持ってくる。（２） - Oboe吹きプログラマの黙示録
で、ＩＥ１１で書けなかった SVG の中の置換え、、SVGまるごと置き換えせざる得なかったが、
この innersvg-polyfill があれば、解決！

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/innersvg-polyfill@0.0.2/innersvg.min.js"></script>

<h2>width × height : 24</h2>
<div class="case1">
	<svg class="chk-on" ></svg>
	<svg class="chk-off"></svg>
</div>
<h3>border</h3>
<div class="case2">
   <svg class="chk-on" ></svg>
   <svg class="chk-off"></svg>
</div>
<h2>width × height : 14</h2>
<div class="case3">
   <svg class="chk-on" ></svg>
   <svg class="chk-off"></svg>
</div>

CSSは、、( 注意： svg の中の path の属性を書きます）

.case1 svg{
     width: 24px;
     height: 24px;
}
.case2 svg {
     width: 24px;
     height: 24px;
     border: 2px solid #c0c0c0;
     border-radius: 6px;
}
.case3 svg {
     width: 14px;
     height: 14px;
     border: 2px solid #c0c0c0;
     border-radius: 4px;
}
svg.chk-on path{
     fill: #2dc214;
     clip-rule: evenodd;
     fill-rule: evenodd;
}
svg.chk-off path{
     fill: #ce1515;
}

Tabulator のチェックONOFFデザインを持ってくる。（２） - Oboe吹きプログラマの黙示録
で書いた、以下も、IE11 で動くようになる。

/* innerHTML にセットする svg - path を定義 */
var svgCheckOn = '<svg class="chk-on" viewBox="0 0 24 24">'
      + '<path d="M21.652----（省略）----652,3.211z">'
      + '</path></svg>';
var svgCheckOff = '<svg class="chk-off" viewBox="0 0 24 24">'
      + '<path d="M22.245----（省略）----245,4.015z">'
      + '</path></svg>';

document.getElementsByClassName('case1')[0].innerHTML = svgCheckOn + svgCheckOff;
document.getElementsByClassName('case2')[0].innerHTML = svgCheckOn + svgCheckOff;
document.getElementsByClassName('case3')[0].innerHTML = svgCheckOn + svgCheckOff;

innerHTML が効くようになると、jQuery の html() も効いて以下でも可能です。
よって、以下のように簡潔に書いても良い。

     $('svg').attr('viewBox', '0 0 24 24');
     $('svg.chk-on').html('<path d="M21.652----（省略）----.652,3.211z"></path>');
     $('svg.chk-off').html('<path d="M22.245----（省略）----245,4.015z"></path>');