这是由用户的使用决定的(以上面的例子来讨论)：
第一种pattern样式：我想这是大多数情况，所以处理成默认值：pattern是会随着外面的图形缩放而被拉伸，不管外围方形是多大，pattern始终在两个方向上都会被填充4次。但是pattern中包含的图形是不会随着外面被填充的方形缩放而进行拉伸的。虽然比较牵强，但就这么理解吧。
第二种pattern样式：pattern中的形状也随着外围的形状缩放进行拉伸。我们可以显示的把patternContentUnits属性的值也设为objectBoundingBox达到这个效果。例如把pattern的部分修改如下：
复制代码
<pattern id=”Pattern” width=”.25″ height=”.25″ patternContentUnits=”objectBoundingBox”>
<rect x=”0″ y=”0″ width=”.25″ height=”.25″ fill=”skyblue”/>
<rect x=”0″ y=”0″ width=”.125″ height=”.125″ fill=”url(#Gradient2)”/>
<circle cx=”.125″ cy=”.125″ r=”.1″ fill=”url(#Gradient1)” fill-opacity=”0.5″/>
</pattern>
修改后，当改变被填充的矩形的大小时，pattern中的形状也会进行拉伸。而且修改后改成了相对外围对象的坐标，所以不再需要pattern的x和y坐标了，pattern会始终调整以适合被填充的形状。
第三种pattern的样式：pattern的形状和大小都是固定了，不管外围对象怎么缩放，你可以把坐标系统都改成userSpaceOnUse实现这个效果。代码如下：
复制代码
<pattern id=”Pattern” x=”10″ y=”10″ width=”50″ height=”50″ patternUnits=”userSpaceOnUse”>
<rect x=”0″ y=”0″ width=”50″ height=”50″ fill=”skyblue”/>
<rect x=”0″ y=”0″ width=”25″ height=”25″ fill=”url(#Gradient2)”/>
<circle cx=”25″ cy=”25″ r=”20″ fill=”url(#Gradient1)” fill-opacity=”0.5″/>
</pattern>
这3中典型的pattern如下图所示：
实用参考：
官方文档：http://www.w3.org/TR/SVG11/
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
