包装矢量画稿里,渐变端点写着百分比,并没有独自说清它位于哪里。W3C的SVG 1.1第二版《Gradients and Patterns》先区分渐变所使用的坐标系统,再解释百分比对应的参照。数字相同,与图形关系相同,是两项需要分别说明的信息。

该章把填充和描边放在共同背景下:前者绘制形状或文字内部,后者绘制轮廓;渐变是其中一种绘制来源。渐变可以被图形的填充或描边属性引用。因此,讨论一份渐变定义时,还需要知道是哪一个图形引用它,不能把渐变想成必然独立显示的一块色纸。

线性渐变由起点与终点建立渐变向量,颜色停点映射到这条向量上。文档列出的gradientUnits则回答这些坐标采用什么参照。userSpaceOnUse取渐变被引用时的当前用户坐标系统;objectBoundingBox以应用渐变的那个对象的边界框建立坐标。两个模式可以描述同类渐变,但所依据的空间并不相同。

文档又明确了百分比的区别:在线性渐变的用户坐标模式中,百分比相对于当前viewport;在对象边界框模式中,百分比相对于对象的边界框。由此,一个百分数只有与坐标模式和参照范围相连才具有完整意义。单独摘录端点数值,仍会丢掉它相对于哪一个范围的位置。

对象框坐标还可以用抽象的两角说明:左上对应零、零,右下对应一、一。这里说的是对象框空间里的位置,不是规定画稿必须有某个实际尺寸。文档在未指定gradientUnits时,按objectBoundingBox处理。因此,没有显式写出坐标模式,并不表示资料中不存在默认参照。

非方形对象使这一点更明显。在gradientTransform为恒等变换的说明条件下,线性渐变的法线与渐变向量在对象框空间中垂直;从对象框空间到用户空间的非均匀缩放,却可能使两者在后者中不再垂直。文档还保留例外:渐变向量平行于边界框某一条轴时,法线仍保持垂直。不能把非方形三个字直接改写成所有方向都一定失去这一关系。

径向渐变的相邻说明在同样条件下也区分空间:对象框空间中的圆环,在非方形边界框对应的非均匀缩放后,会在用户空间呈现椭圆。这里的圆与椭圆各有坐标背景,不是原有颜色数量变了,也不是本文观看图示后的测量。它与线性例共同说明,形状关系必须连同所在空间阅读。

本文只解释这一历史版本的文字定义与邻接,没有编写SVG、计算矩阵或检验印刷结果。对包装源稿资料,保留引用对象、坐标模式和百分比参照,能够准确说清渐变描述的内容;它并不由此证明屏幕与印品一致,或给某个成品作颜色验收。页面首次公开日期未确认,不以版本页标代替。

信息来源

本文基于上述公开资料整理,未使用来源页面的图片、视频或嵌入媒体。