SVG visibility属性用法及代码示例

可见性属性使您可以控制图形元素的可见性。它仅对以下元素<a>，<altGlyph>，<audio>，<canvas>，<circle>，<ellipse>，<foreignObject>，<iframe>，<image>，<line>，<path >，<多边形>，<折线>，<矩形>，<文本>，<文本路径>，<tref>，<tspan>，<视频>

用法:

visibility = visible | hidden | collapse

属性值：可见性属性接受上述和以下所述的值

visible:此值指示该元素将可见。
hidden:此值指示该元素将不可见。
collapse:此值等于隐藏。

范例1：下面的示例说明了可见性属性的用法。

HTML

输出：

范例2：下面的示例说明了可见性属性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:60px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 620 520" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <rect x="10" y="10" width="200" 
            height="100" stroke="green" 
            stroke-width="5" fill="transparent" /> 
  
        <g stroke="seagreen" stroke-width="5" 
            fill="lightgreen"> 
              
            <rect x="20" y="20" width="80" 
                height="80" visibility="hidden" /> 
              
            <rect x="120" y="20" width="80" 
                height="80" visibility="visible" /> 
        </g> 
    </svg> 
  
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG visibility Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。