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