Figure は複数の Figure (すべて SVGFigure) で構成されています。親フィギュアに状態を変更するボタンを持たせて単純化してレンダリングしたい (ほとんどのサブフィギュアとコネクタを非表示にする)
これを達成するための最良の方法は何ですか?
Figure は複数の Figure (すべて SVGFigure) で構成されています。親フィギュアに状態を変更するボタンを持たせて単純化してレンダリングしたい (ほとんどのサブフィギュアとコネクタを非表示にする)
これを達成するための最良の方法は何ですか?
これがあなたが探しているものであるかどうかは100%わかりませんが、質問の私の解釈では:
特定の状態で表示されるべきではない図にクラス名を追加できると思います。たとえば、次の疑似 HTML を使用します。
<input id="toggleButton" type="button">Toggle</input>
<svg>
<shape1 class="complexOnly">
<shape2 class="complexOnly">
<shape3>
</svg>
次の JavaScript では、ボタンのイベント リスナーを追加して状態を切り替えます。
document.getElementById( "toggleButton" ).addEventListener("click", toggleSVGstate, false );
function toggleSVGstate() {
this.classList.toggle( "simpleState" );
}
CSS では、特定の状態にのみ適用されます。
#toggleButton.simpleState>.complexOnly {
display: none; /* Or visibility: hidden */
}
つまり、complexOnly クラスを持つ要素は、toggleButton が単純な状態でない場合にのみ表示されます (単純な状態では非表示になります)。classList.toggle() は完全にクロスブラウザではありませんが、クロスブラウザのものを見つけることができます。