请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-11-2 08:40 编辑
上一讲的pattern动画演示,pattern图案放大或缩小时,只要图案个体完整在目标区域,三角形都保持原本的形状。这得益于 viewBox 属性在pattern中的应用。viewBox 属性的宽高应是pattern图案边界宽高尺寸的(正整数)倍数,比如我们下面的图案,它是一个 40*40 的矩形(rect)和充当矩形对角线的两根直线(line)组成:
<rect x="0" y="0" width="40" height="40" fill="none" stroke="navy" />
<line x1="0" y1="0" x2="40" y2="40" stroke="purple" />
<line x1="40" y1="0" x2="0" y2="40" stroke="purple" />
现在,我们的预期是,用上面这样的图案去填充另一个 200*200 的矩形,且放大缩小图案时保持图案形状不改变。如此,我们需要将上面的图案组合放入pattern标签内,给pattern一个id,然后通过该id填充大矩形。pattern的 viewBox属性,min-x、min-y 为 0,width、height 为 40(即考虑pattern图案的rect和line得出的边界尺寸 40,这里 viewBox 的宽高用了 40 的一倍):
<defs>
<pattern id="pat1" width="20%" height="20%" viewBox="0 0 40 40">
<rect x="0" y="0" width="40" height="40" fill="none" stroke="navy" />
<line x1="0" y1="0" x2="40" y2="40" stroke="purple" />
<line x1="40" y1="0" x2="0" y2="40" stroke="purple" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#pat1)" />
上面的代码,pattern的宽高属性决定的是pattern图案在 200*200 大矩形中的个体比例,20% 也可以表示为 0.2,表示每一个 pattern 图案在去平铺大矩形时的尺寸是大矩形宽高各 20%,即纵横方向都放下 5 个pattern图案。效果如下:
上面的效果,图案正好是满当当的,这是因为 pattern 的尺寸在上面代码规范下,平铺大矩形的每一个图案正好是 40*40 的尺寸。这种情形我们不要 viewBox 属性也是可以的,但图案一旦放大或缩小,没有 viewBox 属性的约束,pattern图案个体可能会因为被剪裁而变形。
下面,提供两个案例,第一个带有 viewBox 属性,第二个没有,开始时它们一模一样,调整 pattern 的 width 和 height 百分比,看看情况如何:
|