svg : pattern 标签（二）

马黑黑 · 发表于 2023-11-2 08:33

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

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 百分比，看看情况如何：