版式图集纹样写法速查

版式图集自定义纹样能写的全部内容：画布和配色变量、算式和每本书的变化、名称和参数、重复和条件，以及「用 AI 写纹样」从剪贴板导入的格式。

适用版本：Reeden 2.0.0 及以上。这里没列出的写法不支持。

版式图集的书封由两层叠成：下面是纹样，上面是 Reeden 排的书名、作者、印章和边框。自定义纹样就是一个 SVG，只管图形，不画字。同一个纹样在图集的每套配色下都会换成那套颜色，每本书还可以略有不同（要写 data-red-variants，见第 3 节）。

纹样只在版式图集的「风格」选「书封」时使用。选「简约 · 几何」「简约 · 文字」时不画纹样，自定义纹样不生效。

用 AI 写纹样

打开版式图集的编辑页，切到「版式」，在纹样网格最后一格点「新建」，选「用 AI 写纹样（复制提示词）」，提示词会复制到剪贴板。
把提示词发给任意 AI 助手，在末尾写上想要的样子，比如「江南水乡：几座拱桥倒映在水里，桥的数量能调」。
复制 AI 的完整回复，回到纹样网格，点「新建」→「从剪贴板导入」。
导入前会用本图集的配色给每个纹样画三本示例书。有错误的纹样不能勾选。

想在已有纹样上改，打开它的编辑页，切到「SVG」，点「AI 改一下」，提示词会带上现在的 SVG。把 AI 回的 SVG 复制下来，点「粘贴」就换上了。

1. 画布和书名的位置

画布宽 1200，高跟着封面比例走：5:7 的封面是 1680，2:3 是 1800。
根元素写 viewBox="0 0 {w} {h}"，坐标就和封面一一对应，换比例也不变形。写死别的 viewBox 也可以，会按「铺满、居中裁掉多出的部分」放进封面。
书名在纹样上面：中式书名在右上角竖排（大约右边三分之一、上面一半），西式书名在上方横排（大约上面五分之二）。纹样的主体最好画在下半部分，或者避开这些位置。
格式（EPUB、TXT）写在角上：中式在左下，西式在右下。

2. 变量

写在属性值或文字里，画的时候换成实际值。

写法	换成	说明
`{bg}`	`#rrggbb`	这一张的底色
`{accent}`	`#rrggbb`	纹样色
`{fg}`	`#rrggbb`	文字色
`{seal}`	`#rrggbb`	版式里的「印章颜色」
`{w}` `{h}`	数字	画布宽高
`{cjk}`	1 或 0	中式排版是 1，西式是 0
`{variant}`	数字	这本书用的是第几种变化，从 0 开始
`currentColor`	纹样色	和 `{accent}` 一样，方便直接用图标类的 SVG

不要把颜色写死，用变量，换配色时纹样才会跟着变。

3. 算式和每本书的变化

{= … } 里是算式，结果是数字：

支持 + - * /、括号、min(a, b)、max(a, b)、round(x)
能用的名字：w、h、cjk、variant、重复里的序号（见下文），以及数值和开关参数
rand(k)：0 到 1 之间的数，由这本书的变化号（{variant}）和 k 决定。k 不同结果不同，同一本书永远一样
写错了（不认识的名字、除以零）算 0，不会让整个纹样失效

rand 只跟变化号有关，不直接跟书名有关：每本书先按书名分到一个变化号（0 到 data-red-variants 减 1），配色和排版相同时，变化号相同的书画出来的纹样完全一样。所以：

不写 data-red-variants（等于 1）时，所有书的 rand(k) 都一样，同一套配色下只有一种样子
写 6 时，同一套配色下最多出现 6 种样子
想让每本书看起来不同，一定要写 data-red-variants，建议 4 到 8

<circle cx="{=240 + rand(0) * 200}" cy="{=h * 0.38}" r="170" fill="{accent}" fill-opacity=".16"/>
<rect x="{=600 - cjk * 200}" y="{=h - 300}" width="400" height="200" fill="{accent}"/>

每本书能有几种变化，由下面的 data-red-variants 决定。

4. 名称、排版和变化数

写在 <metadata> 里，画的时候忽略：

<metadata>
  <meta data-red-name="银杏" data-red-family="cjk" data-red-variants="6"/>
</metadata>

data-red-name：纹样的名字，导入时用它
data-red-family：适用排版。cjk 中式，latin 西式，both 都用。按书名挑纹样时，中式书只从中式和都用的纹样里挑，西式书同理
data-red-variants：变化数，1 到 8，不写是 1。它决定 rand(k) 和 {variant} 能取几种值，不写时所有书一模一样

名称和排版导入后在编辑页里也能改。

5. 参数

参数在编辑页的「效果」里显示成滑块、开关、取色器或下拉，不用改代码就能调。写在 <metadata> 里：

<meta data-red-param="cover.leaves" data-red-type="range" data-red-label="叶子数"
      data-red-min="3" data-red-max="12" data-red-default="7"/>
<meta data-red-param="cover.sun" data-red-type="switch" data-red-label="远日" data-red-default="true"/>
<meta data-red-param="cover.leafColor" data-red-type="color" data-red-label="点缀叶" data-red-default="{seal}"/>
<meta data-red-param="cover.shape" data-red-type="select" data-red-label="形状"
      data-red-options="circle:圆,square:方" data-red-default="circle"/>

data-red-param="cover.名字"：在 SVG 里用 {名字} 引用，算式里直接写 名字
data-red-type：range 数值（data-red-min、data-red-max、data-red-step），switch 开关，color 颜色，select 下拉（data-red-options="值:标签,值:标签"）
data-red-default：默认值。颜色的默认值写 {bg}、{accent}、{fg} 或 {seal}，表示跟随配色，编辑页显示成「跟随印章色」这类字样
data-red-label：控件上的名字
data-red-when：这个参数什么时候显示在「效果」里，引用另一个参数（只影响显示，不影响绘制）：
- data-red-when="cover.sun"：sun 有值时显示（开关打开、数值不为 0、其他类型不为空）
- data-red-when="!cover.sun"：前面加 ! 取反，sun 没有值时显示
- data-red-when="cover.shape=circle"、data-red-when="cover.shape=circle|square"：值等于其中之一时显示，同样可以在最前面加 ! 取反
- 写法不对、引用了不存在的参数或它自己时，这个参数总是显示
data-red-group="分组名"：把参数归到一组
开关在算式里是 1 或 0；{名字} 换成 true 或 false

参数写错时，编辑页「效果」里会列出提示。

6. 重复和条件

<use data-red-repeat="{leaves}" href="#leaf" transform="translate({=210 + rand(i) * 700} {=h - 140 - rand(i + 40) * 600})"/>
<circle data-red-if="{sun}" cx="330" cy="{=h * 0.38}" r="170" fill="{accent}"/>

data-red-repeat="N"：把这个元素复制 N 份，最多 64 份。里面用 {i} 取序号（从 0 开始），算式里写 i
嵌套重复时，内层加 data-red-index="j" 换个名字，就能同时用 i 和 j
data-red-if：值是 false、0 或空时去掉这个元素
一个纹样展开后最多 2000 个图形，超出的部分不画

7. 能用的图形

能用：path、rect、circle、ellipse、line、polyline、polygon、g、use、defs、linearGradient、radialGradient、pattern、clipPath、mask、transform、opacity、stroke-dasharray
不要用：filter、text、CSS 动画和脚本
不能内嵌图片（<image>、data: 地址）
一个 SVG 最多 32 KB，一个图集最多 12 个自定义纹样

8. 完整示例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {w} {h}">
  <metadata>
    <meta data-red-name="银杏" data-red-family="cjk" data-red-variants="6"/>
    <meta data-red-param="cover.leaves" data-red-type="range" data-red-label="叶子数"
          data-red-min="3" data-red-max="12" data-red-default="7"/>
    <meta data-red-param="cover.sun" data-red-type="switch" data-red-label="远日" data-red-default="true"/>
    <meta data-red-param="cover.leafColor" data-red-type="color" data-red-label="点缀叶"
          data-red-default="{seal}"/>
  </metadata>
  <defs>
    <path id="leaf" d="M0 0 L-118 -150 A190 190 0 0 1 -8 -196 L0 -150 L8 -196 A190 190 0 0 1 118 -150 Z M-4 0 h8 v110 h-8 Z"/>
  </defs>
  <circle data-red-if="{sun}" cx="{=240+rand(0)*200}" cy="{=h*0.38}" r="170" fill="{accent}" fill-opacity=".16"/>
  <use data-red-repeat="{leaves}" href="#leaf" fill="{accent}" fill-opacity="{=0.45+rand(i)*0.5}"
       transform="translate({=210+rand(i+20)*(700-cjk*180)} {=h-140-rand(i+40)*600}) rotate({=rand(i+60)*140-70}) scale({=0.5+rand(i+80)*0.45})"/>
  <use href="#leaf" fill="{leafColor}" transform="translate({=460+rand(9)*220} {=h-470}) rotate({=rand(10)*40-20}) scale(.75)"/>
</svg>

9. 导入格式

「从剪贴板导入」和「导入 .svg 文件」认的都是完整的 <svg>…</svg>。剪贴板里可以有多段（比如 AI 回复里的几个 ```svg 代码块），每段算一个纹样，前后的说明文字会被忽略。

导出的 .svg 会把名称、排版和改过的参数写回 <metadata>，导进别的图集还是同一个样子。

版式图集纹样写法速查

On this page