|
这是由用户的使用决定的(以上面的例子来讨论)：
第一种pattern样式：我想这是大多数情况，所以处理成默认值：pattern是会随着外面的图形缩放而被拉伸，不管外围方形是多大，pattern始终在两个方向上都会被填充4次。但是pattern中包含的图形是不会随着外面被填充的方形缩放而进行拉伸的。虽然比较牵强，但就这么理解吧。
第二种pattern样式：pattern中的形状也随着外围的形状缩放进行拉伸。我们可以显示的把patternContentUnits属性的值也设为objectBoundingBox达到这个效果。例如把pattern的部分修改如下：
复制代码 代码如下:
<pattern patternContentUnits="objectBoundingBox">
<rect x="0" y="0" fill="skyblue"/>
<rect x="0" y="0" 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 x="10" y="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" fill="skyblue"/>
<rect x="0" y="0" fill="url(#Gradient2)"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
这3中典型的pattern如下图所示：
实用参考：
官方文档：
脚本索引：(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考： （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
