svg : pattern 标签（三）
<style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma > svg { border: 1px solid gray; }
</style>
<div class="ma">
<p>pattern也有x和y属性，本节就单讲这个内容。</p>
<p>默认情况下，它们和width、height属性一样，也是用百分比或者0至1的浮点数表示，x和y属性缺省时为0或0%。pattern的xy属性做什么用？试看如下演示，第一个图形所引用的pattern图案是p1，x="5"，y="10%"，第二个图形所引用的pattern图案是p2，xy属性缺省：</p>
<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>
<p style="display:flex;align-items: center;gap: 4px;">
<label for="Rng">设置p1宽高百分比：</label>
<input id="Rng" type="range" min="10" width="100" value="100" step="10" />
<output id="msgRng">100%</output>
</p>
<p>再看svg核心代码：</p>
<pre>
<svg width="420" height="200" style="border: 1px solid gray;">
<defs>
<pattern id="p1" <span class="rred">x="5%" y="10%"</span> 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>
</pre>
<p>代码中，两个pattern除了xy属性外，其余的设置一模一样，p1填充左边的rect标签，p2填充右边的rect标签。比较两个图形的填充的效果，应该可以感受到，pattern的xy属性影响着平铺行为。具体如何影响，请调节p1的宽高比例细细体会。</p>
<p>小结：pattern的xy属性会令平铺产生基于XY轴的偏移，偏移行为针对pattern整体效果而非单个pattern图案个体。</p>
</div>
<script>
Rng.oninput = () => {
let val = Rng.value + '%';
msgRng.innerText = val;
p1.setAttribute('width',val);
p1.setAttribute('height',val);
};
</script>
提示：当 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的。{:4_173:}
红影 发表于 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
正解
谢谢黑黑，都是你讲解的内容呢，我是在复述中让自己记住而已{:4_173:} 马黑黑 发表于 2023-11-3 12:46
p1的动态演示，基于固定的x="5%" y="10%"，然后改变宽高
是的，再看才明白，我思路一下子卡住了，以为是xy的变化呢，现在知道了{:4_187:} 红影 发表于 2023-11-3 15:25
是的，再看才明白，我思路一下子卡住了，以为是xy的变化呢，现在知道了
那里明明写着宽高二字 红影 发表于 2023-11-3 15:24
谢谢黑黑，都是你讲解的内容呢，我是在复述中让自己记住而已
挺好挺好 马黑黑 发表于 2023-11-3 21:28
那里明明写着宽高二字
思路没转过来呗，就盯着xy看了{:4_173:} 马黑黑 发表于 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
额
主要是思路一开始就歪了{:4_173:} 红影 发表于 2023-11-4 10:42
主要是思路一开始就歪了
歪歪更快乐 红影 发表于 2023-11-4 10:41
肯定的，不熟的先背个几遍，然后至少混个脸熟。
貌似很笨的方法 马黑黑 发表于 2023-11-4 10:50
歪歪更快乐
还好，后来转正了{:4_173:}