昨日書いた
oboe2uran.hatenablog.com
やはり、IE11でも表示できるJS版にします
原始的に、DOMの innerHTML を使います。
HTML
<h2>width × height : 24</h2> <div class="case1"></div> <h3>border</h3> <div class="case2"></div> <h2>width × height : 14</h2> <div class="case3"></div>
CSS は前回と同じです。
svg.chk-on path { fill: #2dc214; clip-rule: evenodd; fill-rule: evenodd; } svg.chk-off path { fill: #ce1515; } .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; }
/* 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;
このように、div に innerHTML するしかなく、svgタグ で innerHTML 実行できないのです。