个性化阅读
专注于IT技术分析

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) 打赏
未经允许不得转载:srcmini » SVG模式pattern用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏