SVG <hatch>用法及代碼示例

SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。

<hatch> SVG元素用於描畫對象。它使用一個或多個預定義路徑填充對象。在指定的方向上經過固定間隔後，它將重複該路徑，以覆蓋要繪製的區域。

用法:

<hatch x="" y="" pitch="" rotate="" hatchUnits="" 
hatchContentUnits="" transform="" href="">

屬性：

x-它定義了用戶坐標係中的x軸坐標。
y -它定義了用戶坐標係中的y軸坐標。
rotate - 它指定動畫元素沿<animateMotion>元素中指定的路徑行進時如何旋轉。
transform - 它定義了應用於元素和元素子元素的轉換定義列表。
href - 它將到資源的鏈接定義為參考URL。

範例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 1100 400"> 
        <defs> 
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="5" rotate="135"> 
  
                <hatchpath stroke="#a080ff" 
                    stroke-width="2" /> 
            </hatch> 
        </defs> 
  
        <foreignObject x="95" y="12" 
            width="160" height="160" 
            color="Green"> 
              
            <div> 
                <br><br>GEEKSFORGEEKS<br><br> 
            </div> 
  
        </foreignObject> 
        <rect fill="url(#hatch)" 
            stroke="Green" stroke-width="2" 
            x="5%" y="5%" width="20%" 
            height="20%" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
      
<body> 
    <svg viewBox="0 0 1100 400"> 
        <defs> 
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="9" rotate="135"> 
  
                <hatchpath stroke="Green" 
                    stroke-width="12" /> 
            </hatch> 
        </defs> 
  
        <foreignObject x="110" y="12" 
            width="160" height="160" 
            color="Green"> 
              
            <div> 
                <br><br>GeeksForGeeks<br><br> 
            </div> 
  
        </foreignObject> 
        <ellipse vfill="url(#hatch)" 
            fill="None" stroke="green" 
            stroke-width="2" cx="164" 
            cy="58" rx="100" ry="50"
            fill /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自epistler_999大神的英文原創作品 SVG <hatch> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。