SVG patternContentUnits属性用法及代码示例

patternContentUnits属性用于指示<pattern>元素的内容必须使用哪个坐标系。

用法:

patternContentUnits ="userSpaceOnUse"

// Or 

patternContentUnits ="objectBoundingBox"

属性值：patternContentUnits属性接受上述和以下所述的值：

userSpaceOnUse:它指示<pattern>元素内的所有坐标均指创建图案图块时定义的用户坐标系。
objectBoundingBox:它表示<pattern>元素内的所有坐标都是<pattern>元素的边界框的分数或百分比值。

注意：默认值为userSpaceOnUse。

范例1：下面的示例说明了如何使用objectBoundingBox值来使用patternContentUnits属性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
        margin-left:2%;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <pattern id="geek2" width="40%" 
            height="40%" fill="green" 
            patternContentUnits="objectBoundingBox"> 
              
            <ellipse cx=".2" cy=".1" rx=".2" ry=".1" /> 
        </pattern> 
          
        <rect width="50" height="50" 
            fill="url(#geek2)" /> 
    </svg> 
</body> 
  
</html>

输出：下面是与上面的代码对应生成的输出

范例2：下面的示例说明了如何使用userSpaceOnUse值来使用patternContentUnits属性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 200 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <pattern id="geek2" width="40%" 
            height="40%" fill="green" 
            patternContentUnits="userSpaceOnUse"> 
              
            <ellipse cx="5" cy="5" rx="2" ry="1" /> 
        </pattern> 
          
        <rect width="50" height="50" 
            fill="url(#geek2)" /> 
    </svg> 
</body> 
  
</html>

输出：下面是与上面的代码对应生成的输出

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG patternContentUnits Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。