如何在Graffiti中创建可折叠的图形？

Question

该图由多个图形组成（所有SVGFigure）。我希望父图有一个改变其状态的按钮，以便简化渲染（隐藏大多数子图和连接器）

实现这一目标的最佳方式是什么？

Answer 1

我不是百分百肯定这是否是你要找的，而是我对这个问题的解释：

我认为你可以为那些不应该在某种状态下显示的数字添加类名。例如，这个伪HTML：

<input id="toggleButton" type="button">Toggle</input>
<svg>
    <shape1 class="complexOnly">
    <shape2 class="complexOnly">
    <shape3>
</svg>

使用以下JavaScript，为按钮添加eventlistener以切换状态：

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（）不是完全crossbrowser，但你可以找到一个crossbrowser，因为我只是提供了思考的方式。