當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


SVG <feMorphology>用法及代碼示例


SVG 代表可縮放矢量圖形。它可以用來製作圖形和動畫,就像在 HTML 畫布中一樣。

SVG Element 允許您“thin” 或“thicken” 圖形。它指定一個運算符,其值為 erode 以使圖形變細或 dilate 使圖形變粗。 radius 屬性告訴我們線條要加粗或細化多少,它還有助於製作動畫來改變圖像的像素。

什麽是變形?

變形意味著改變或改變物體的形式或形狀。

用法:

<defs>
    <!--erode-->
    <filter id="erode">
        <feMorphology operator="erode" radius="1" />
    </filter>

    <!--dilate-->
    <filter id="dilate">
        <feMorphology operator="dilate" radius="2" />
    </filter>
</defs>

屬性:

  • Global Attributes:使用一些全局屬性,例如核心屬性和樣式屬性等。
  • Specific Attributes: 它用於更改 in、type 和 value 的屬性。

SVG <feMorphology> Element 對象具有以下屬性:

  1. height:獲取或設置元素的高度。
  2. in1:標識給定過濾器原語的輸入。
  3. 運算符:指定是否進行減薄或加厚操作。
  4. X 半徑:指定要在 X 方向應用的加厚或減薄。
  5. 半徑 Y:指定要在 Y 方向應用的加厚或減薄。
  6. result:為過濾器的輸出結果提供參考。
  7. width:定義元素的寬度。
  8. x:獲取或設置 x 坐標值。
  9. y:獲取或設置 y 坐標值。

示例 1:侵蝕有助於使圖像尺寸(尺寸)變小:

HTML


<!DOCTYPE html> 
<html> 
<body> 
    <svg width="450" height="300" viewBox="0 0 450 300"> 
        <filter id="morphology"> 
            <feMorphology operator="erode" radius="0"> 
                <animate attributeName="radius" 
                         from="0" to="5" dur="5s" 
                         repeatCount="indefinite" /> 
            </feMorphology> 
        </filter> 
  
        <image
            xlink:href= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png"
                width="90%" height="90%" x="10" y="10" 
                   filter="url(#morphology)"></image> 
    </svg> 
</body> 
  
</html>

輸出:

示例 2:擴張有助於使圖像尺寸(尺寸)變得更大:

HTML


<!DOCTYPE html> 
<html> 
<body> 
    <svg width="450" height="300" viewBox="0 0 450 300"> 
        <filter id="morphology2"> 
            <feMorphology operator="dilate" radius="0"> 
                <animate attributeName="radius" 
                         from="0" to="5" dur="5s" 
                         repeatCount="indefinite" /> 
            </feMorphology> 
        </filter> 
        <image
            xlink:href= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png"
            width="90%" height="90%" x="10" y="10" )"></image> 
    </svg> 
</body> 
  
</html>

輸出:

示例 3:這是上述兩個示例的說明:

HTML


<!DOCTYPE html> 
<html> 
<body> 
    <svg width="450" height="300" viewBox="0 0 450 300"> 
        <filter id="morphology2"> 
            <feMorphology operator="dilate" radius="0"> 
                <animate attributeName="radius" 
                         from="0" to="5" dur="5s" 
                         repeatCount="indefinite" /> 
            </feMorphology> 
        </filter> 
        <image xlink:href= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" 
               width="90%" 
               height="90%" x="10" y="10" )"> 
        </image> 
    </svg> 
  
    <svg width="450" height="300" viewBox="0 0 450 300"> 
        <filter id="morphology"> 
            <feMorphology operator="erode" radius="0"> 
                <animate attributeName="radius" 
                          from="0" to="5" dur="5s" 
                          repeatCount="indefinite" /> 
            </feMorphology> 
        </filter> 
  
        <image xlink:href= 
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" 
               width="90%" 
               height="90%" x="10" y="10" 
               filter="url(#morphology)"> 
        </image> 
    </svg> 
</body> 
  
</html>

輸出:



相關用法


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