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轴坐标。