SVG fr屬性用法及代碼示例

這個fr屬性定義線性漸變的焦點半徑。

用法:

fr="radius"

屬性值：

length:我們要設置半徑的長度。
percentage:我們要設置半徑的百分比。

我們將使用fr屬性來設置元素的半徑。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 600 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <defs> 
            <radialGradient id="gradient1" 
                cx="0.3" cy="0.3" r="0.5" 
                fx="0.55" fy="0.35" fr="20%"> 
  
                <stop offset="0%" stop-color="red" /> 
                <stop offset="100%" stop-color="green" /> 
            </radialGradient> 
        </defs> 
  
        <circle cx="100" cy="100" r="100" 
            fill="url(#gradient1)" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 600 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <defs> 
            <radialGradient id="gradient1" 
                cx="0.5" cy="0.5" r="0.5" 
                fx="0.35" fy="0.35" fr="25%"> 
                  
                <stop offset="0%" stop-color="white" /> 
                <stop offset="100%" stop-color="green" /> 
            </radialGradient> 
        </defs> 
  
        <circle cx="100" cy="100" r="100" 
            fill="url(#gradient1)" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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