svg : pattern标签（四）
<style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.zs { color: green; }
.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标签中使用绝对值而不是百分比做尺寸单位，正如在绝大多数的svg子标签默认的一样。这能否可以实现？必须的！我们要做的仅是，给pattern指定用户空间的坐标单元。所谓用户空间坐标单元，指的是使用引用pattern图案的元素的坐标系统，定义如下：</p>
<pre>
patternUnits="userSpaceOnUse | objectBoundingBox"
</pre>
<p class="rred">本节我们单讲 patternUnits。</p>
<p>patternUnits属性用于定义pattern单元，具体指坐标系统，缺省、默认值是 objectBoundingBox，使用的坐标系统是pattern相对系统，pattern的x、y、width、height等属性要求使用百分比做单位；另一个值 userSpaceOnUse 如果设定，则使用引用者（当前用户）的坐标系统——通常，像 circle、rect 等标签，它们使用绝对数值表示位置和尺寸，比如 60，默认就是 60px，希望是别的单位，则可以加上，例如 60cm、60% 等等。下面的代码，我们定义了patternUnits 为 userSpaceOnUse，故而pattern的宽高属性值不再使用百分比：</p>
<pre>
<svg width="600" height="600" style="border: 1px solid gray;">
<defs>
<pattern id="p1" width="60" height="60" <span class="rred">patternUnits="userSpaceOnUse"</span> viewBox="0 0 60 60">
<polygon fill="olive" points="0 30,30 0,60 30,30 60" />
</pattern>
</defs>
<span class="zs"><-- 矩形尺寸占满svg视口 --></span>
<rect x="0" y="0" width="100%" height="100%" fill="url(#p1)" />
</svg>
</pre>
<p>代码中，pattern设置了viewBox属性，因此pattern的width和height尺寸变化不会改变图案的个体形状，请调节宽高尺寸查看效果：</p>
<svg width="600" height="300" 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>
<rect x="0" y="0" width="100%" height="100%" fill="url(#p1)" />
</svg>
<p style="display:flex;align-items:center;gap:6px;">
<label for="rng">调节pattern宽高尺寸:</label>
<input id="rng" type="range" min="10" max="600" value="60" step="10" />
<output id="rngMsg">width="60" height="60"</output>
</p>
<br>
<p>【结语】</p>
<p>pattern 的 patternUnits 属性用于定义图案所使用的坐标系统，它作用于pattern的 x、y、width、height 属性值的体现是，当 patternUnits="userSpaceOnUse" 时，这些属性值跟随引用者（用户标签）使用绝对数值，否则，当 patternUnits="objectBoundingBox" 或 该数值不设置时，定位和宽高属性的数值使用百分比相对值（相对于pattern自身的坐标系统）。</p>
<p>pattern还有几个属性以及其他可以继续探讨的知识，但我们的任务已经完成，如果希望更完整地理解pattern，可以自行扩展。</p>
</div>
<script>
rng.oninput = () => {
rngMsg.innerText = 'width="' + rng.value + '" height="' + rng.value + '"';
p1.setAttribute('width',rng.value);
p1.setAttribute('height',rng.value);
};
</script>
使用了patternUnits="userSpaceOnUse"后，可以直接用60代替10%，取值更习惯了{:4_204:} “希望是别的单位，则可以加上，例如 60cm、60% 等等。”
使用了userSpaceOnUse坐标系后，也可以用百分比单位啊。这个百分比和之前的一样呢。
嗯，用了这个，输入宽高可以更灵活了，而且默认是px，这个px都不用输了，真方便{:4_173:} 红影 发表于 2023-11-4 09:47
使用了patternUnits="userSpaceOnUse"后，可以直接用60代替10%，取值更习惯了
也更直观 红影 发表于 2023-11-4 09:52
“希望是别的单位，则可以加上，例如 60cm、60% 等等。”
使用了userSpaceOnUse坐标系后，也可以用百分比 ...
svg数值的单位，默认是用户单位，没有单位时是 px，可以加上单位。而pattern另有规范，默认用百分比。
实际上使用百分比在布局上更方便。 今天上来就看见黑黑3个教程帖，休息天自动加班了{:4_173:} 这些小辣椒看不懂，就飘走了{:4_173:} 小辣椒 发表于 2023-11-4 14:20
这些小辣椒看不懂，就飘走了
这个不懂可惜呢 马黑黑 发表于 2023-11-4 11:03
也更直观
是啊，加上这句真挺好的。 马黑黑 发表于 2023-11-4 11:05
svg数值的单位，默认是用户单位，没有单位时是 px，可以加上单位。而pattern另有规范，默认用百分比。
...
只是和平日的习惯不同而已。 红影 发表于 2023-11-4 21:26
只是和平日的习惯不同而已。
所有的东东都有自己的规范。即便简单到给手机充电，不同厂家的手机，所用的充电协议未必相同，所以混用充电头充电的效果也不会相同。 马黑黑 发表于 2023-11-4 22:32
所有的东东都有自己的规范。即便简单到给手机充电，不同厂家的手机，所用的充电协议未必相同，所以混用充 ...
嗯嗯，学习的时候必须记住这些规范。 红影 发表于 2023-11-5 08:21
嗯嗯，学习的时候必须记住这些规范。
规范弄懂了，接下来就是创造了 马黑黑 发表于 2023-11-5 16:32
规范弄懂了，接下来就是创造了
弄懂还需要时间啊。 红影 发表于 2023-11-5 22:29
弄懂还需要时间啊。
热心的一下子的事情 马黑黑 发表于 2023-11-5 23:12
热心的一下子的事情
那是聪明人的事，对我这样单核的只能一点点学习{:4_173:} 红影 发表于 2023-11-6 16:27
那是聪明人的事，对我这样单核的只能一点点学习
也好 马黑黑 发表于 2023-11-6 23:02
也好
学到哪算哪吧。 红影 发表于 2023-11-7 15:17
学到哪算哪吧。
也好 马黑黑 发表于 2023-11-7 19:23
也好
没什么不好{:4_173:}