当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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