SVG fill-opacity屬性用法及代碼示例

fill-opacity屬性是一種表示屬性，它定義了應用於形狀的繪畫的不透明度。

用法:

fill-opacity="colour"

屬性值：

decimal:我們要使元素不透明的十進製值。
percentage:我們要設置fill-opacity屬性的百分比。

我們將使用fill-opacity屬性設置fill-color的不透明度。

範例1：

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg viewBox="0 0 400 100" 
         xmlns="http://www.w3.org/2000/svg"> 
        <circle cx="50" cy="50" r="35" fill="green"/> 
  
        <circle cx="150" cy="50" r="35" fill="green"
        fill-opacity="0.7" /> 
    </svg> 
</body>  
  
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg viewBox="0 0 400 100"
        xmlns="http://www.w3.org/2000/svg"> 
        <circle cx="60" cy="60" r="40" fill="black"/> 
  
        <circle cx="150" cy="60" r="40" fill="black"
        fill-opacity="25%" /> 
    </svg> 
</body>  
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG fill-opacity Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。