svg : pattern标签（四）

马黑黑 · 发表于 2023-11-4 08:02

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

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

x

很多时候，我们希望在pattern标签中使用绝对值而不是百分比做尺寸单位，正如在绝大多数的svg子标签默认的一样。这能否可以实现？必须的！我们要做的仅是，给pattern指定用户空间的坐标单元。所谓用户空间坐标单元，指的是使用引用pattern图案的元素的坐标系统，定义如下：

	patternUnits="userSpaceOnUse | objectBoundingBox"

本节我们单讲 patternUnits。

patternUnits属性用于定义pattern单元，具体指坐标系统，缺省、默认值是 objectBoundingBox，使用的坐标系统是pattern相对系统，pattern的x、y、width、height等属性要求使用百分比做单位；另一个值 userSpaceOnUse 如果设定，则使用引用者（当前用户）的坐标系统——通常，像 circle、rect 等标签，它们使用绝对数值表示位置和尺寸，比如 60，默认就是 60px，希望是别的单位，则可以加上，例如 60cm、60% 等等。下面的代码，我们定义了patternUnits 为 userSpaceOnUse，故而pattern的宽高属性值不再使用百分比：

<svg width="600" height="600" style="border: 1px solid gray;">
	<defs>
		<pattern id="p1" width="60" height="60" patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
			<polygon fill="olive" points="0 30,30 0,60 30,30 60" />
		</pattern>
	</defs>
	<-- 矩形尺寸占满svg视口 -->
	<rect x="0" y="0" width="100%" height="100%" fill="url(#p1)" />
</svg>

代码中，pattern设置了viewBox属性，因此pattern的width和height尺寸变化不会改变图案的个体形状，请调节宽高尺寸查看效果：

调节pattern宽高尺寸: width="60" height="60"

【结语】

pattern 的 patternUnits 属性用于定义图案所使用的坐标系统，它作用于pattern的 x、y、width、height 属性值的体现是，当 patternUnits="userSpaceOnUse" 时，这些属性值跟随引用者（用户标签）使用绝对数值，否则，当 patternUnits="objectBoundingBox" 或该数值不设置时，定位和宽高属性的数值使用百分比相对值（相对于pattern自身的坐标系统）。

pattern还有几个属性以及其他可以继续探讨的知识，但我们的任务已经完成，如果希望更完整地理解pattern，可以自行扩展。