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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。