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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。