jQuery のプラグイン、Tabulator のチェックON/OFF のデザインは、ＳＶＧで作成されているので
Tabulator サンプル等を表示して、ＳＶＧコードを抽出して他で利用できそうである。
このチェックＯＮ、ＯＦＦのＳＶＧコードのＨＴＭＬタグを抽出すると以下である。
とても長い path タグの d 属性は、この投稿では適当なところで改行しているが、実際は１行である。
省略してしまうとコピぺできないので途中改行して書いてます。
<!-- ON の SVG --> <svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve"> <path fill="#2DC214" clip-rule="evenodd" fill-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297- 1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.3 51 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.1 84c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.3 66-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z"> </path> </svg> <!-- OＦＦ の SVG --> <svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve"> <path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c- 0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.27 7c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l- 6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0- 1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.8 27,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.82 8,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"> </path> </svg>
この SVGタグ属性で省略可能なものがあります。
enable-background は、省略できます。というより将来消滅するかもしれず、奨励されてないと思います。
enable-background はフィルタ処理する時に使用するもので単にWebページ表示では関係ないでしょう。
xml:space="preserve" → XMLの扱いで空白文字を保存ということですが、Webページ表示でこれも省略しても問題ないでしょう。
次に重要な属性、、、
path の fill属性、これが fill（塗りつぶし）の色を指定するものです。
そして、SVG の viewVox 属性、これが単純に、X座標、Y座標、width, height ということではないらしいんです。
X座標、Y座標 → 左上角の位置、そこから、Ｘ軸に width 、Ｙ軸に、height の位置が右下角の座標です。
これらから、ＣＳＳにできるものはＣＳＳで書いてみます。
以下のように、サンプルを書きました。適当に使い回せると思います。
チェックＯＮ／ＯＦＦ属性の path と、３ケースのＳＶＧタグのＣＳＳです。
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; }
サンプル表現の為のＣＳＳ
div{ padding: 20px; background-color: #f0f0f0; }
HTML
path の d属性は、とても長く上で書いたので省略してます。
<h2>width × height : 24</h2> <div class="case1"> <svg class="chk-on" viewBox="0 0 24 24"> <path d="M21.652-----（省略）----- 652,3.211z"> </path> </svg> <svg class="chk-off" viewBox="0 0 24 24"> <path d="M22.245-----（省略）------ 245,4.015z"> </path> </svg> </div> <h3>border</h3> <div class="case2"> <svg class="chk-on" viewBox="0 0 24 24"> <path d="M21.652-----（省略）----- 652,3.211z"> </path> </svg> <svg class="chk-off" viewBox="0 0 24 24"> <path d="M22.245-----（省略）------ 245,4.015z"> </path> </svg> </div> <h2>width × height : 14</h2> <div class="case3"> <svg class="chk-on" viewBox="0 0 24 24"> <path d="M21.652-----（省略）----- 652,3.211z"> </path> </svg> <svg class="chk-off" viewBox="0 0 24 24"> <path d="M22.245-----（省略）------ 245,4.015z"> </path> </svg> </div>
これを表示すると、、、
という結果でした。。
ＩＥ１１でも表示できます。
これを JS から動的に生成表示してみます。ＣＳＳは、そのままです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $('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>'); }); </script>
Chrome ブラウザで問題なく、想定どおり表示されるのですが、、
IE11 が表示されません。
ＩＥ１１が表示できない理由が解りません。
「IEが、、、」
「Microsoft が、、、、]
毎回、聞こえてくる呟きです。。
なんで、Mycrosoft は、こういつも、ダメなの？
仕方なく、、、
oboe2uran.hatenablog.com
