SVG operator屬性用法及代碼示例

operator屬性定義要執行的合成操作或變形操作。使用此屬性的元素包括：<feComposite>和<feMorphology>。

用法:

operator = erode|dilate|over|arithmetic|out|atop|xor|lighter|in

屬性值：運算符屬性接受上麵提到和下麵描述的值

over:它顯示了in屬性中定義的源圖形放置在in2屬性中定義的目標圖形上方。
in:它顯示了in屬性中定義的源圖形的部分替換了in2屬性中定義的目標圖形。
out:它顯示了顯示在in屬性中定義的源圖形的各個部分。
atop:它顯示源圖形中與目標圖形重疊的部分替換了目標圖形。
xor:它顯示了in屬性中定義的源圖形的非重疊區域與in2屬性中定義的目標圖形組合在一起。
lighter:它顯示了分別顯示在in和in2屬性中定義的源圖形和目標圖形的總和。
arithmatic:它顯示使用以下公式分別組合了in和in2屬性中定義的源圖形和目標圖形：結果= k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4
erode:它將變薄in屬性中定義的源圖形。
dilate:它會增強in屬性中定義的源圖形。

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

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 420 70" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <filter id="thin"> 
            <feMorphology operator="erode" radius="0.4" /> 
        </filter> 
  
        <text x="10" y="20" fill="green" filter="url(#thin)"> 
            Thin text 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 420 70" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="fat"> 
            <feMorphology operator="dilate" radius="0.8" /> 
        </filter> 
  
        <text x="10" y="20" fill="green" filter="url(#fat)"> 
            Fat text 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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