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 对象具有以下属性：

height：获取或设置元素的高度。
in1：标识给定过滤器原语的输入。
运算符：指定是否进行减薄或加厚操作。
X 半径：指定要在 X 方向应用的加厚或减薄。
半径 Y：指定要在 Y 方向应用的加厚或减薄。
result：为过滤器的输出结果提供参考。
width：定义元素的宽度。
x：获取或设置 x 坐标值。
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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。