SVG radius屬性用法及代碼示例

radius屬性是<feMorphology>過濾器原語上操作的半徑。如果給出兩個數字，則第一個數字為x-radius，第二個數字為y-radius。如果僅給出一個數字，則將其同時用於x和y軸。

注意：零或負值將禁用<feMorphology>過濾器原語的效果。

用法:

radius = number-optional-number

屬性值：radius屬性接受上述和以下描述的值：

number-optional-number：它是一對數字，其中第二個數字是可選的。默認值為0。

以下示例說明了radius屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        text { 
            font-family:Arial; 
            font-size:2.5em; 
        } 
    </style> 
</head> 
  
<body> 
    <div style="color:green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <svg xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="Geek1"> 
                <feMorphology operator="erode" 
                    radius=".5" /> 
            </filter> 
            <text style="filter:url(#Geek1);" 
                y="1em">Thin Geeky Text</text> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        text { 
            font-family:Arial; 
            font-size:2em; 
        } 
    </style> 
</head> 
  
<body> 
    <div style="color:green;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <svg xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="Geek1"> 
                <feMorphology operator="dilate"
                        radius="2" /> 
            </filter> 
            <text style="filter:url(#Geek1);" 
                y="1em">Thick Geeky Text</text> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

相關用法

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