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