SVG g元素的行为和可见性属性

您好，目前我正在尝试将SVG作为我的应用程序的主要显示格式。然而，当涉及到可见性属性时，我发现了一个相当奇怪的行为。举个例子：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <g id="visibility-test">
        <rect x="100" y="0" height="140" width="40"/>
        <rect x="0" y="100" height="40" width="140" visibility="visible"/>
    </g>                
</svg>

这与预期的一样。这两个矩形可见。现在，我想让整个组都隐藏起来，我将g元素的可见性设置为隐藏，如下所示：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
    <g id="visibility-test" visibility="hidden">
        <rect x="100" y="0" height="140" width="40"/>
        <rect x="0" y="100" height="40" width="140" visibility="visible"/>
    </g>                
</svg>

如果在浏览器中查看，它会隐藏一个矩形（没有任何属性的矩形），但具有可见性属性的矩形仍然可见。我本以为整个分支的可见性会受到影响，但父元素会受到影响

---

有没有办法在不切换任何子对象的可见性的情况下实现此行为？

SVG与DOM中的HTML不一样。浏览器使用HTML解析器解析网页中的HTML。浏览器还将使用XML解析器来解析网页上的SVG标记。因此，即使它们呈现在同一页面上，也会受到不同的处理

如果父项具有

可见性

属性。而且他们的任何孩子都有一个

可见性属性。然后您需要将childs
visibility
属性更改为
inherit
。SVG将允许子级仍然可见，即使其父级设置为隐藏

W3C SVG可见性属性规范：


SVG可见性属性的可用值：

visible | hidden | collapse | inherit

但是您应该将
可见性
属性放置在父
元素上，或者单独放置它。SVG
属性的默认值为
inherit
。因此，SVG将尊重其应用到的元素的可见性状态，而不管其父级
可见性
状态如何
 display的工作方式是display=“none”vs display=“block”