SVG 可以使用 <pattern>元素定義模式。它用于以平鋪方式填充圖形元素。
使用預(yù)定義的圖形對一個(gè)對象進(jìn)行填充或描邊，就要用到pattern元素。pattern元素讓預(yù)定義圖形能夠以固定間隔在x軸和y軸上重復(fù)（或平鋪）從而覆蓋要涂色的區(qū)域。先使用pattern元素定義圖案，然后在給定的圖形元素上用屬性fill或?qū)傩詓troke引用用來填充或描邊的圖案。
<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>測試看看?/?
運(yùn)行效果如如下:
<pattern> 的id屬性定義了模式的唯一名稱。
patternUnits用于定義x，y，寬度和高度屬性。
cx和cy是圖案邊界框的x和y軸坐標(biāo)。