知识文章 · 编写日期 2026-11-10

色虎纹样：卡片变宽为何条带也变宽

可能是纹样使用了相对卡片包围盒的坐标。若图案周期和内部条带都按卡片宽度的比例定义，卡片从240加宽到480单位，条带与周期也会横向变成两倍。想保持固定尺寸，需要同时核对周期和内部图形的坐标设置，不能只改其中一个。

色虎的原创纹样构成知识练习，使用简化直条带代替复杂虎纹，专门观察横向尺寸。本页按SVG 1.1的pattern规则解释，图中四张卡处于同一用户坐标系，没有缩放、图案变换或pattern自身viewBox；单位是设计坐标单位，不是实际印刷毫米。

周期大小和周期内画什么，是两件事

SVG的patternUnits规定图案单元的x、y、width、height采用什么坐标；patternContentUnits规定单元内部图形采用什么坐标。W3C规范将二者分别定义，所以“周期改成相对尺寸”不自动等于“内部条带也按比例缩放”。

objectBoundingBox以填充对象的包围盒为参照。在本页矩形中，横向1对应整张卡的宽度。userSpaceOnUse则使用引用图案时的用户坐标。这里固定了坐标系，所以60始终是同样长的60设计单位。

第一组明确把patternUnits和patternContentUnits都设为objectBoundingBox，不给pattern设置viewBox。单元width为0.25，内部深色矩形width为0.125；单元及条带height均为1。于是每个周期占卡片四分之一宽，其中一半是深色条带。

短卡宽240时，周期为240×0.25=60，深色条带宽240×0.125=30。宽卡改为480时，周期为120，条带宽60。两张卡都恰好容纳四个周期，只是宽卡上的条带和空隙都更宽。

这不是图案分辨率变低，也不是复制数量随机改变。定义本来绑定于对象尺寸；如果希望图案与每张卡成比例，这样做可以是有意安排。判断是否合适，要看设计需要固定重复次数，还是固定条带尺度。

第二组把两项坐标属性都设为userSpaceOnUse，单元width写60，内部深色条带width写30，高度写80。短卡宽240容纳四个周期，宽卡宽480容纳八个周期；每个深色条带仍宽30。

这里改变的是可填充区域的宽度，不是把整张SVG放大。如果把父级画布或对象另作缩放，用户坐标单位仍可能映射为不同屏幕长度；因此“固定60用户单位”不等于在所有网页缩放和打印条件下固定60物理像素或毫米。

规范默认的patternUnits是objectBoundingBox，而patternContentUnits默认是userSpaceOnUse。若漏写属性，可能得到“周期随卡片变，内部图形却不跟着同样变”的混合情况，出现意外空隙或裁切。不要凭属性名字相近就认为默认值相同。

若pattern带有viewBox，规范说明patternContentUnits不再起作用；patternTransform或祖先变换也可能改变显示结果。本页没有这些条件，真实文件则需一并核对，不能只套用240与480的算式。

做对照时先保存原稿，固定高度、颜色、显示比例与条带形状，只改变卡片宽度。记录周期数与一条深色带的宽度，再决定采用相对比例或固定坐标。完成后按实际卡片尺寸检查文字是否被底纹干扰，计算正确也不能替代可读性检查。

它只规定单元位置与尺寸的坐标。内部条带还要检查patternContentUnits；若有pattern的viewBox，应按它解释内容坐标。

不一定。相对比例适合希望每张卡保持同样周期数的设计；固定坐标适合希望条带尺度一致而重复次数随区域变化的设计。

不是。它们只来自本例宽度240/480与周期0.25或60的组合。边界不整除、起点偏移或另有变换时，应按实际参数重算。

W3C SVG 1.1第二版，13.3 Patterns（W3C，核验日期 2026-11-10）
支持patternUnits和patternContentUnits各自含义、不同默认值、viewBox使内容坐标属性失效，以及patternTransform的作用。本文尺寸、直条图案与对照由本站设计。