SVG <hatchpath>用法及代碼示例

SVG代表可縮放矢量圖形。它用於製作可以縮放到大屏幕尺寸的圖形和動畫。 <hatchpath> 元素定義了填充路徑，供<hatch>。 <hatchpath> 元素在<hatch> 元素中定義。

先決條件：<hatch>

<hatch>

用法:

<hatchpath stroke="" stroke-width=" "/>

屬性：

d: d 屬性定義要繪製的路徑
offset: offset 屬性用於設置路徑的偏移量。

示例 1：

HTML


<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 1100 400"> 
        <defs> 
            <hatch id="hatch"
                hatchUnits="userSpaceOnUse"
                pitch="5" rotate="135"> 
  
                <hatchpath stroke="blue"
                    stroke-width="15" /> 
            </hatch> 
        </defs> 
  
        <foreignObject x="100" y="12"
            width="160" height="160"
            color="Green"> 
              
            <div> 
                <br><br>GFG<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：

HTML


<!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>GFG<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>

輸出：

瀏覽器兼容性：目前，沒有瀏覽器支持此元素，但現代瀏覽器的未來版本可以支持它。

相關用法

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