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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。