Question

您好，我现在正试图将SVG作为我的应用程序的主要显示格式。但是，当涉及到visibility属性时，我发现了一个相当奇怪的行为。给出这个例子：

<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>

这表现得如预期。两个矩形是可见的。现在我想让整个组我将g元素的可见性设置为隐藏，如：

   V1     V2      V3  
1.choco,Crack,Foodies  
2.choco,Crack,Foodies  
3.Flakes,Flakes,Foodies  
4.Flakes,Flakes,Foodies  
5.Flakes,Flakes,Foodies  
6.Surrain,Surrain,Tango->lilly  
7.Surrain,Surrain,Tango->lilly

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

有没有办法在不切换永远孩子的可见性的情况下实现这种行为？

Answer 1

SVG在DOM中不像HTML那样工作。 SVG is namespaced。浏览器使用HTML解析器来解析网页中的HTML。浏览器还将使用XML解析器在网页上显示SVG标记。因此，即使它们在同一页面上呈现，它们也会被区别对待。

如果父级具有visibility属性。他们的孩子也有visibiity属性。然后，您需要将该子项visibility属性更改为inherit。 SVG将允许子项仍然可见，即使其父项设置为隐藏。

W3C SVG可见性属性规范：

http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty

SVG可见性属性的可用值：

visible | hidden | collapse | inherit

但是您应该将visibility属性放在父<g>元素上，或者将其单独放置。 SVG attribute的默认值为inherit。因此，无论其父visibility状态如何，SVG都将遵守其应用的元素的可见性状态。

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

1 个答案: