svg : pattern 标签（三）

马黑黑

pattern也有x和y属性，本节就单讲这个内容。

默认情况下，它们和width、height属性一样，也是用百分比或者0至1的浮点数表示，x和y属性缺省时为0或0%。pattern的xy属性做什么用？试看如下演示，第一个图形所引用的pattern图案是p1，x="5"，y="10%"，第二个图形所引用的pattern图案是p2，xy属性缺省：

设置p1宽高百分比：

100%

再看svg核心代码：

<svg width="420" height="200" style="border: 1px solid gray;">
	<defs>
		<pattern id="p1" x="5%" y="10%" width="100%" height="100%" viewBox="0 0 60 60">
			<polygon fill="olive" points="0 30,30 0,60 30,30 60" />
		</pattern>
		<pattern id="p2" width="100%" height="100%" viewBox="0 0 60 60">
			<polygon fill="navy" stroke="none" points="0 30,30 0,60 30,30 60" />
		</pattern>
	</defs>

	<rect x="0" y="0" width="200" height="200" fill="url(#p1)" />
	<rect x="220" y="0" width="200" height="200" fill="url(#p2)" />
</svg>

代码中，两个pattern除了xy属性外，其余的设置一模一样，p1填充左边的rect标签，p2填充右边的rect标签。比较两个图形的填充的效果，应该可以感受到，pattern的xy属性影响着平铺行为。具体如何影响，请调节p1的宽高比例细细体会。

小结：pattern的xy属性会令平铺产生基于XY轴的偏移，偏移行为针对pattern整体效果而非单个pattern图案个体。

马黑黑

提示：当 p1 的宽高百分比小于等于 50% 时，最便于观察偏移的样式。因为，大于 50% 时，rect矩形装不下两个或以上的pattern图案。

红影

“pattern的xy属性会令平铺产生基于XY轴的偏移”，这句看懂了。
前面介绍的都是xy 对应0 0的，这里讲的是如果不是0会怎样。x和y属性和width、height属性一样，也是用百分比或者0至1的浮点数表示。

红影

“调节p1的宽高百分比”这句没看懂，x和y一个5%一个10%，调的是这个不同比例的百分比么？

红影

红影 发表于 2023-11-3 10:20
“调节p1的宽高百分比”这句没看懂，x和y一个5%一个10%，调的是这个不同比例的百分比么？

哦，我看错，是宽高百分比，是宽和高同时变化的值，跟第一个例子里的三角形一样的，这是这次的xy不是在00了，哈哈，我把宽高跟xy混一起去了，因为介绍的是xy变化后的，所以以为那个调整是xy的。

马黑黑

红影 发表于 2023-11-3 10:17
“pattern的xy属性会令平铺产生基于XY轴的偏移”，这句看懂了。
前面介绍的都是xy 对应0 0的，这里讲的是 ...

正解

马黑黑

红影 发表于 2023-11-3 10:23
哦，我看错，是宽高百分比，是宽和高同时变化的值，跟第一个例子里的三角形一样的，这是这次的xy不是在00 ...

p1的动态演示，基于固定的x="5%" y="10%"，然后改变宽高

红影

马黑黑 发表于 2023-11-3 12:45
正解

谢谢黑黑，都是你讲解的内容呢，我是在复述中让自己记住而已

红影

马黑黑 发表于 2023-11-3 12:46
p1的动态演示，基于固定的x="5%" y="10%"，然后改变宽高

是的，再看才明白，我思路一下子卡住了，以为是xy的变化呢，现在知道了

马黑黑

红影 发表于 2023-11-3 15:25
是的，再看才明白，我思路一下子卡住了，以为是xy的变化呢，现在知道了

那里明明写着宽高二字

马黑黑

红影 发表于 2023-11-3 15:24
谢谢黑黑，都是你讲解的内容呢，我是在复述中让自己记住而已

挺好挺好

红影

马黑黑 发表于 2023-11-3 21:28
那里明明写着宽高二字

思路没转过来呗，就盯着xy看了

红影

马黑黑 发表于 2023-11-3 21:29
挺好挺好

好记性不如烂笔头，多打几遍更容易记住。

马黑黑

红影 发表于 2023-11-3 22:51
好记性不如烂笔头，多打几遍更容易记住。

也许吧

马黑黑

红影 发表于 2023-11-3 22:51
思路没转过来呗，就盯着xy看了

额

红影

马黑黑 发表于 2023-11-3 23:36
也许吧

肯定的，不熟的先背个几遍，然后至少混个脸熟。

红影

马黑黑 发表于 2023-11-3 23:36
额

主要是思路一开始就歪了

马黑黑

红影 发表于 2023-11-4 10:42
主要是思路一开始就歪了

歪歪更快乐

马黑黑

红影 发表于 2023-11-4 10:41
肯定的，不熟的先背个几遍，然后至少混个脸熟。

貌似很笨的方法

红影

马黑黑 发表于 2023-11-4 10:50
歪歪更快乐

还好，后来转正了