编辑这个页面须要登录或更高权限！

svg <pattern> 元素

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

使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

<svg width="120" height="120" viewBox="0 0 120 120"    
xmlns="http://www.w3.org/2000/svg" version="1.1"    
xmlns:xlink="http://www.w3.org/1999/xlink">    
<defs>    
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">    
<polygon points="5,0 10,10 0,10"/>    
    </pattern>    
</defs>    
<circle cx="60" cy="60" r="50"  fill="url(#Triangle)"/>    
</svg>
测试看看‹/›

运行效果如如下:

用法解释

  • <pattern> 的id属性定义了模式的唯一名称。

  • patternUnits用于定义x，y，宽度和高度属性。

  • cx和cy是图案边界框的x和y轴坐标。

SVG <mask> 元素SVG Viewport和ViewBox