SVG模式pattern用法示例

可以使用<pattern>元素定义模式。它用于以平铺方式填充图形元素。

例子

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>SVG Pattern</h1>
      
      <svg width="950" height="950">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 3 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="orange" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="40" >Triangle using the Pattern </text>
            <rect x="100" y="100" width="300" height="300" stroke="orange" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

立即测试

解释

  • <pattern>的id属性定义了模式的唯一名称。
  • patternUnits用于定义x, y, 宽度和高度属性。
  • x和y是图案边界框的x和y轴坐标。
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?