可见性不适用于svg-g标签

visibility is not working for svg g tag

本文关键字：标签 svg-g 适用于 不适用 可见性      更新时间：2024-01-30

我在应用程序中使用svg，并使用g标记对所有元素进行分组。第一个g标记包含多个g标记，所有g标记都有自己不同的可见性样式。如果我将可见性设置为隐藏到父g标记，它将影响其他g标记元素。我需要通过将可见性设置为父元素来隐藏所有g标记元素，但子元素的可见性样式不应更改。

这里的样本svg

<svg height: "200" width="200">
    <g style="visibility:hidden">
        <g style="visibility:visible">
            <circle cx="100" cy="100" fill="green" r="15" />
        </g>
    </g>
</svg>

这是工作样品
如何设置父g标记的可见性而不更改其子元素的可见性？

尝试使用opacity:0而不是visibility:hidden。

另外，你应该看看这个例子http://svg-whiz.com/svg/HideShow.svg

正如其他人所说，很难完全理解你在追求什么。

我已经删除了这个答案，因为它感觉我错过了你的观点，但我认为它可能仍然有帮助http://jsfiddle.net/rnZss/5/，它仍然会显示矩形，但会隐藏圆圈，所以我暂时留下了答案。你还想发生什么？

<svg height:"200" width="200">
    <g style="visibility:hidden">
        <g style="visibility:hidden">
            <circle style="visibility: hidden"cx="100" cy="100" fill="green" r="15"/>
            <rect style="visibility: visible" x="50" y="50" width="50" height="50"/>
        </g>
    </g>
</svg>
相关文章：