另外一个可能用到的属性是spreadMethod属性，这个属性定义了渐变色到达它的终点时应该采取的行为。该属性有3个可选值：pad(默认值),reflect,repeat。pad不用说了，属于自然过渡，渐变色结束以后，使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继续，只不过渐变色会反向继续渲染，从最后一个颜色开始到第一个颜色这个顺序渲染；等到再次到达渐变色终点时，再反序，如此这般指导对象填充完毕。repeat也会让渐变色继续渲染，但是不会反序，还是一遍一遍从第一种颜色到最后一种颜色渲染。效果图如下所示：
看一段重复渲染的代码：
复制代码
<svg width=”220″ height=”220″>
<defs>
<radialGradient id=”Gradient”
cx=”0.5″ cy=”0.5″ r=”0.25″ fx=”.25″ fy=”.25″
spreadMethod=”repeat”>
<stop offset=”0%” stop-color=”red”/>
<stop offset=”100%” stop-color=”blue”/>
</radialGradient>
</defs>
<rect x=”50″ y=”50″ rx=”15″ ry=”15″ width=”100″ height=”100″
fill=”url(#Gradient)”/>
</svg>
纹理填充
纹理填充也是一种流行的填充方式，在SVG中，可以使用pattern创建一个纹理，然后用这个pattern去填充别的对象。直接看例子：
复制代码
<svg width=”200″ height=”200″>
<defs>
<linearGradient id=”Gradient6″>
<stop offset=”0%” stop-color=”white”/>
<stop offset=”100%” stop-color=”blue”/>
</linearGradient>
<linearGradient id=”Gradient7″ x1=”0″ x2=”0″ y1=”0″ y2=”1″>
<stop offset=”0%” stop-color=”red”/>
<stop offset=”100%” stop-color=”orange”/>
</linearGradient>
</defs>
<defs>
<pattern id=”Pattern” x=”.05″ y=”.05″ width=”.25″ height=”.25″>
<rect x=”0″ y=”0″ width=”50″ height=”50″ fill=”skyblue”/>
<rect x=”0″ y=”0″ width=”25″ height=”25″ fill=”url(#Gradient7)”/>
