SVG 可见性属性

在 SVG 中，可以使用可见性属性来控制对象是否可见。 可见性属性只影响对象在呈现时是否可见，但不影响对象本身的存在。

可见性属性值

visible

默认值，对象可见。

<rect x="20" y="20" width="50" height="50" fill="green" visibility="visible" />

hidden

对象不可见，但保留其占用的空间。

<rect x="20" y="20" width="50" height="50" fill="green" visibility="hidden" />

collapse

对象不可见，也不占用空间。

<rect x="20" y="20" width="50" height="50" fill="green" visibility="collapse" />

注意事项

• 可见性属性仅对 SVG 对象有效，对其他 HTML 元素无效。
• 可见性属性可以与 CSS 的 display 属性结合使用。
• 如果设置了 display:none，则可见性属性自动设置为 collapse。

结论

可见性属性是控制 SVG 对象是否可见的一种方式。 根据需要使用不同的可见性值可以优化 SVG 图形的显示效果。同时注意配合使用 display 属性来实现更为高效的显示效果及元素控制。