ntk 8.17.1 → 8.17.4

package/lib/fontconfig.js

@@ -901,11 +901,31 @@ export function charsetHas(candidate, codepoint) {
   return false;
 }
 
+/**
+ * A CSS font weight on fontconfig's scale, which is not CSS's: regular is 80
+ * there and black is 210. The hundreds are the table's; a weight between two
+ * of them is as far between their fontconfig weights, so 450 is 90, halfway
+ * from regular to medium. CSS takes 1 to 1000, and what is outside the table
+ * is its nearest end.
+ *
+ * Handed over as it was, 450 was a weight past twice black, and fontconfig
+ * answered with the heaviest face a family has: Arial Bold, where a browser
+ * sets 450 in Arial Regular. At 90 fontconfig picks the face nearest in
+ * weight, which is the regular's 80 and not the bold's 200.
+ *
+ * A whole number, because a pattern is a cache key and an fc-match of its
+ * own: the weights an axis is animated through then share the ones they
+ * round to.
+ */
 function normalizeWeight(weight) {
   if (weight === undefined) return undefined;
   if (weight === 'normal') return cssToFcWeight[400];
   if (weight === 'bold') return cssToFcWeight[700];
   const n = parseInt(weight, 10);
   if (Number.isNaN(n)) return undefined;
-  return cssToFcWeight[n] !== undefined ? cssToFcWeight[n] : n;
+  const css = Math.min(900, Math.max(100, n));
+  const below = Math.floor(css / 100) * 100;
+  const lighter = cssToFcWeight[below];
+  if (css === below) return lighter;
+  return Math.round(lighter + ((cssToFcWeight[below + 100] - lighter) * (css - below)) / 100);
 }

package/lib/renderingcontext_2d.js

@@ -396,6 +396,17 @@ function prepareStyle(src, m) {
     : true;
 }
 
+/**
+ * Whether every entry can be written as XRender's 16.16 fixed point, whose
+ * whole part is a signed 16-bit number. A picture transform is written that
+ * way, and the request encoder throws on an entry past it — out of the paint
+ * that asked for it, and out of everything drawn after it in the same frame.
+ * Not finite fails too.
+ */
+function fitsFixed(values) {
+  return values.every((v) => Math.abs(v) < 32768);
+}
+
 function isPictureSource(image) {
   return (
     image instanceof Image ||
@@ -5503,6 +5514,11 @@ class RenderingContext2d {
     const M = matMultiply(this._m, [dw / sw, 0, 0, dh / sh, dx, dy]);
     const inv = matInvert(M);
     if (!inv) return;
+    // The inverse's linear part is how many source pixels one device pixel
+    // steps across, and it goes on the wire as 16.16 fixed point. Past
+    // 32,767 the image is drawn at under 1/32,768 of its size: less than a
+    // pixel across for any image X can hold, and nothing to see.
+    if (!fitsFixed(inv.slice(0, 4))) return;
 
     // device bbox of the transformed dest rect, clamped to the canvas
     const corners = [
@@ -5523,6 +5539,24 @@ class RenderingContext2d {
     );
     if (x1 <= x0 || y1 <= y0) return;
 
+    // Device -> source sample, measured from the bounding box's corner: the
+    // corner's device position is folded into the transform, and the
+    // composite's source origin is its box's offset from that corner. With
+    // the source origin at device coordinates instead, the translation was
+    // the device position times the downscale — a 50x30 thumbnail of a
+    // 2000x1200 image at x 2,200 is 88,000, past what 16.16 carries, and
+    // the encoder threw. From the corner it is the source coordinate the
+    // corner samples: the image's own size or so, wherever on the surface it
+    // is drawn. The corner is the unclipped one, so a clip that narrows the
+    // box below samples the same points the mask route does.
+    const [a, b, c, d] = inv;
+    const e = a * x0 + c * y0 + inv[4] + sx;
+    const f = b * x0 + d * y0 + inv[5] + sy;
+    // A corner out of reach even so is a draw near the limit above, or an
+    // image over 20,000 pixels across under a rotation; it is not drawn,
+    // rather than thrown out of the paint.
+    if (!fitsFixed([e, f])) return;
+
     // A rectangular clip shrinks the box instead of becoming a mask (issue
     // #307). Decided before the picture transform is installed, so a draw
     // the clip rejects does not have to put it back.
@@ -5531,27 +5565,15 @@ class RenderingContext2d {
     if (direct && !direct.box) return;
     const box = direct ? direct.box : bbox;
 
-    // device -> source sample (adding the source-rect origin)
-    const srcM = [inv[0], inv[1], inv[2], inv[3], inv[4] + sx, inv[5] + sy];
-    this.Render.SetPictureTransform(picture.id, [
-      srcM[0],
-      srcM[2],
-      srcM[4],
-      srcM[1],
-      srcM[3],
-      srcM[5],
-      0,
-      0,
-      1,
-    ]);
+    this.Render.SetPictureTransform(picture.id, [a, c, e, b, d, f, 0, 0, 1]);
     picture.setFilter("bilinear");
     this.Render.Composite(
       op,
       picture.id,
       direct ? direct.mask : this._compositeMask(box),
       this._dst(),
-      box.x,
-      box.y,
+      box.x - x0,
+      box.y - y0,
       box.x,
       box.y,
       box.x,
@@ -5701,7 +5723,7 @@ class CanvasGradient {
     if (k !== 1) inv = inv.map((v) => v / k);
     // the transform is 16.16 fixed point too: one that cannot be carried
     // fills nothing, rather than throwing the rest of the paint away
-    if (!inv.every((v) => Math.abs(v) < 32767)) return false;
+    if (!fitsFixed(inv)) return false;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||
@@ -5831,6 +5853,11 @@ class CanvasPattern {
     const m = matMultiply(ctm, this._m);
     const inv = matInvert(m);
     if (!inv) return false;
+    // 16.16 fixed point, as a gradient's is: a tile scaled down far from
+    // the origin puts its device position times the downscale into the
+    // translation, and one that cannot be carried fills nothing rather than
+    // throwing the rest of the paint away
+    if (!fitsFixed(inv)) return false;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||

package/lib/text/font.js

@@ -4,6 +4,7 @@ import { flatten, rasterizePath } from '../rasterize.js';
 import { NO_ANCHOR, tolerateAnchors, watchAnchors } from './anchors.js';
 import { marksCover, standInMarks } from './marks.js';
 import { pairGlyphs, pairsCover } from './pairs.js';
+import { sfntOf } from './sfnt.js';
 
 // Axis coordinates are rounded to this many decimals before anything is
 // instantiated or cached. Every distinct coordinate is a font in its own
@@ -145,11 +146,20 @@ function statedOrGlyph(fk, field, codePoint) {
  * the space among them, and every layout in it threw, which left a whole
  * document blank. An empty glyph's box is its empty outline's, as the rest
  * of fontkit has it. Installed once, on the class every TrueType glyph is.
+ *
+ * Not on a WOFF2's glyphs, where its `glyf` table is transformed: those are
+ * decoded whole, with no header to read, and the file's `loca` is empty —
+ * fontkit reads the table after it in its place, which is wrong about which
+ * glyphs are empty (about 24 of Geist's 975). Asked, it sent a glyph to a
+ * header that is not there, and in an instance of a variable face, whose
+ * box is needed to make the outline, round and round until the stack ran
+ * out.
  */
 const MENDED = new WeakSet();
 
 function mendEmptyGlyphBoxes(fk) {
-  if (!fk.directory?.tables?.glyf) return;
+  const glyf = fk.directory?.tables?.glyf;
+  if (!glyf || glyf.transformed) return;
   let glyph;
   try {
     glyph = fk.getGlyph(0);
@@ -169,6 +179,28 @@ function mendEmptyGlyphBoxes(fk) {
   };
 }
 
+/**
+ * `fk`, or where it is a variable face read out of a WOFF or a WOFF2, the
+ * same font read from the sfnt inside the container (./sfnt.js): fontkit
+ * cuts an instance out of an uncompressed font only, and a variable web
+ * font is nearly always a WOFF2. A static face is left as it came — nothing
+ * is asked of it that a container does not answer.
+ *
+ * A container this cannot take apart is left too, and says so when an
+ * instance is asked of it (`_instantiate`).
+ */
+function instantiable(fk) {
+  if (fk.type !== 'WOFF' && fk.type !== 'WOFF2') return fk;
+  if (!fk.directory?.tables?.fvar) return fk;
+  try {
+    const bytes = sfntOf(fk);
+    if (!bytes) return fk;
+    return fontkit.create(Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength));
+  } catch {
+    return fk;
+  }
+}
+
 export default class Font {
   constructor(fkFont, path, postscriptName) {
     answerWithCharacters(fkFont);
@@ -205,7 +237,7 @@ export default class Font {
         (postscriptName && fk.fonts.find((f) => f.postscriptName === postscriptName)) ||
         fk.fonts[0];
     }
-    return new Font(fk, path, postscriptName);
+    return new Font(instantiable(fk), path, postscriptName);
   }
 
   /**
@@ -226,7 +258,7 @@ export default class Font {
         (postscriptName && fk.fonts.find((f) => f.postscriptName === postscriptName)) ||
         fk.fonts[0];
     }
-    const font = new Font(fk, null, postscriptName);
+    const font = new Font(instantiable(fk), null, postscriptName);
     font.key = key ?? `mem:#${fk.postscriptName || ''}`;
     return font;
   }
@@ -307,15 +339,18 @@ export default class Font {
 
   /**
    * fontkit's instancing, with the one failure it has turned into something
-   * that says what to do about it.
+   * that says what happened.
    *
-   * `getVariation` rebuilds the face from the original stream at the
-   * original directory offset. For a WOFF2 that stream is still
-   * Brotli-compressed, so the copy comes back with a directory parsed out of
-   * compressed bytes — no `cmap`, and a `Cannot read properties of undefined
+   * `getVariation` rebuilds the face as a plain sfnt from the original
+   * stream, which for a WOFF is another directory and for a WOFF2 is still
+   * Brotli-compressed: the copy comes back with a directory parsed out of
+   * the wrong bytes — no `cmap`, and a `Cannot read properties of undefined
    * (reading 'tables')` from somewhere deep in shaping, at the first
-   * character drawn rather than here. Checking the instance is well-formed
-   * costs one property read and moves the report to the call that caused it.
+   * character drawn rather than here. A variable face in either container
+   * is read from the sfnt inside it for that reason (`instantiable`), so
+   * this is a container that could not be taken apart. Checking the
+   * instance is well-formed costs one property read and moves the report to
+   * the call that caused it.
    */
   _instantiate(coords) {
     const instance = this.fk.getVariation(coords);
@@ -323,9 +358,9 @@ export default class Font {
       throw new Error(
         `ntk: cannot instantiate a variation of ${this.postscriptName || this.key}` +
           (this.fk.type ? ` (${this.fk.type})` : '') +
-          '. fontkit can only instantiate axes from an uncompressed font — ' +
-          'ship the .ttf/.otf of a variable font rather than its .woff2. ' +
-          'See docs/fonts.md#variable-fonts'
+          '. fontkit instantiates axes from an uncompressed font only, and ' +
+          'the sfnt inside this file could not be rebuilt — ship the ' +
+          '.ttf/.otf of the font. See docs/fonts.md#variable-fonts'
       );
     }
     return instance;

package/lib/text/sfnt.js

@@ -0,0 +1,388 @@
+// A WOFF or a WOFF2, as the sfnt it was made from.
+//
+// fontkit reads a font out of either container, a table at a time, and that
+// is all most faces are asked for. A variable face is asked for more: an
+// instance, cut at a point of its design space, and fontkit (2.0.4) cuts
+// one by reading the file again as a plain sfnt — a WOFF's directory is
+// another, and a WOFF2 is Brotli-compressed — so the instance came back
+// with no tables, and the first text set at a weight off the file's default
+// threw. A variable web font is nearly always a WOFF2: a page set in one
+// drew nothing.
+//
+// So a variable face that arrives in a container is handed to fontkit as
+// the sfnt inside it (`Font`, text/font.js), and everything after that is
+// the path an uncompressed font takes. Built here rather than fixed there,
+// because there is nowhere to put a fixed fontkit: upstream releases
+// rarely, and a fork has to be named by URL or by git, neither of which npm
+// 12 installs for a dependency of a dependency (`allow-remote` and
+// `allow-git` are `none` unless an application says otherwise).
+//
+// A WOFF is the sfnt's tables, each deflated on its own, and fontkit
+// inflates them. A WOFF2 is the tables in one Brotli stream, which fontkit
+// decompresses, with `glyf` and `loca` *transformed*: the glyphs' contour
+// counts, point counts, flags, coordinates, composites, boxes and
+// instructions are each a stream of their own, and `loca` is left out. The
+// work here is writing those back as the two tables (WOFF2, 5.1 to 5.3).
+
+/** Reads big-endian numbers off a byte array, from a position it keeps. */
+class Reader {
+  constructor(bytes, pos = 0, end = bytes.length) {
+    this.bytes = bytes;
+    this.view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    this.pos = pos;
+    this.end = end;
+  }
+
+  need(n) {
+    if (this.pos + n > this.end) throw new RangeError('a stream of the WOFF2 glyf table ends short');
+  }
+
+  u8() {
+    this.need(1);
+    return this.bytes[this.pos++];
+  }
+
+  u16() {
+    this.need(2);
+    const value = this.view.getUint16(this.pos);
+    this.pos += 2;
+    return value;
+  }
+
+  i16() {
+    this.need(2);
+    const value = this.view.getInt16(this.pos);
+    this.pos += 2;
+    return value;
+  }
+
+  u32() {
+    this.need(4);
+    const value = this.view.getUint32(this.pos);
+    this.pos += 4;
+    return value;
+  }
+
+  take(n) {
+    this.need(n);
+    const out = this.bytes.subarray(this.pos, this.pos + n);
+    this.pos += n;
+    return out;
+  }
+
+  /** WOFF2's 255UInt16: a number up to 65535 in one to three bytes. */
+  u255() {
+    const code = this.u8();
+    if (code === 253) return this.u16();
+    if (code === 255) return this.u8() + 253;
+    if (code === 254) return this.u8() + 506;
+    return code;
+  }
+}
+
+const signed = (flag, value) => (flag & 1 ? value : -value);
+
+// glyf: a simple glyph's flags, and a composite's
+const ON_CURVE = 0x01;
+const OVERLAP_SIMPLE = 0x40;
+const ARGS_ARE_WORDS = 0x0001;
+const HAS_SCALE = 0x0008;
+const MORE_COMPONENTS = 0x0020;
+const HAS_XY_SCALE = 0x0040;
+const HAS_TWO_BY_TWO = 0x0080;
+const HAS_INSTRUCTIONS = 0x0100;
+
+/**
+ * The `glyf` and `loca` tables a WOFF2's transformed `glyf` stands for.
+ *
+ * A glyph comes out as the points it had, not the bytes: a coordinate is
+ * written as a 16-bit step from the one before, where the font it was made
+ * from had short forms and repeats. What reads the table reads the same
+ * outline, and nothing here is written to a file.
+ *
+ * @param {Uint8Array} table the transformed table
+ * @returns {{ glyf: Uint8Array, loca: Uint8Array }}
+ */
+export function untransformGlyf(table) {
+  const head = new Reader(table);
+  head.u16(); // reserved
+  const options = head.u16();
+  const numGlyphs = head.u16();
+  head.u16(); // the loca format the font had: a long one is written
+  const sizes = [];
+  for (let i = 0; i < 7; i += 1) sizes.push(head.u32());
+  let at = head.pos;
+  const stream = (size) => {
+    const reader = new Reader(table, at, at + size);
+    at += size;
+    if (at > table.length) throw new RangeError('the WOFF2 glyf table is shorter than its streams');
+    return reader;
+  };
+  const contours = stream(sizes[0]);
+  const pointCounts = stream(sizes[1]);
+  const flags = stream(sizes[2]);
+  const glyphs = stream(sizes[3]);
+  const composites = stream(sizes[4]);
+  const boxes = stream(sizes[5]);
+  const instructions = stream(sizes[6]);
+  // a bit a glyph, set where its box is stored; the boxes follow the bits
+  const stored = boxes.take(((numGlyphs + 31) >> 5) << 2);
+  const overlaps = options & 1 ? new Reader(table, at).take((numGlyphs + 7) >> 3) : null;
+  const bit = (bits, i) => (bits[i >> 3] & (0x80 >> (i & 7))) !== 0;
+
+  const records = [];
+  let total = 0;
+  for (let id = 0; id < numGlyphs; id += 1) {
+    const count = contours.i16();
+    let record = null;
+    if (count > 0) {
+      record = simpleGlyph(count, {
+        pointCounts,
+        flags,
+        glyphs,
+        instructions,
+        box: bit(stored, id) ? boxes : null,
+        overlap: overlaps !== null && bit(overlaps, id)
+      });
+    } else if (count < 0) {
+      // a composite's box cannot be had from its points: it has to be stored
+      if (!bit(stored, id)) throw new RangeError('a composite glyph of the WOFF2 has no box');
+      record = compositeGlyph(count, { composites, glyphs, instructions, box: boxes });
+    }
+    records.push(record);
+    if (record) total += (record.length + 3) & ~3;
+  }
+
+  const glyf = new Uint8Array(total);
+  const loca = new Uint8Array((numGlyphs + 1) * 4);
+  const offsets = new DataView(loca.buffer);
+  let offset = 0;
+  for (let id = 0; id < numGlyphs; id += 1) {
+    offsets.setUint32(id * 4, offset);
+    const record = records[id];
+    if (!record) continue;
+    glyf.set(record, offset);
+    offset += (record.length + 3) & ~3;
+  }
+  offsets.setUint32(numGlyphs * 4, offset);
+  return { glyf, loca };
+}
+
+function simpleGlyph(count, { pointCounts, flags, glyphs, instructions, box, overlap }) {
+  const ends = [];
+  let points = 0;
+  for (let i = 0; i < count; i += 1) {
+    points += pointCounts.u255();
+    ends.push(points - 1);
+  }
+  const on = new Uint8Array(points);
+  const xs = new Int32Array(points);
+  const ys = new Int32Array(points);
+  let x = 0;
+  let y = 0;
+  let xMin = 0x7fff;
+  let yMin = 0x7fff;
+  let xMax = -0x8000;
+  let yMax = -0x8000;
+  for (let i = 0; i < points; i += 1) {
+    // a point is a flag and one to four bytes: which, and how they divide
+    // between the two steps, is the flag's (WOFF2, 5.2)
+    let flag = flags.u8();
+    on[i] = flag >> 7 ? 0 : 1;
+    flag &= 0x7f;
+    let dx = 0;
+    let dy = 0;
+    if (flag < 10) {
+      dy = signed(flag, ((flag & 14) << 7) + glyphs.u8());
+    } else if (flag < 20) {
+      dx = signed(flag, (((flag - 10) & 14) << 7) + glyphs.u8());
+    } else if (flag < 84) {
+      const b0 = flag - 20;
+      const b1 = glyphs.u8();
+      dx = signed(flag, 1 + (b0 & 0x30) + (b1 >> 4));
+      dy = signed(flag >> 1, 1 + ((b0 & 0x0c) << 2) + (b1 & 0x0f));
+    } else if (flag < 120) {
+      const b0 = flag - 84;
+      dx = signed(flag, 1 + (Math.floor(b0 / 12) << 8) + glyphs.u8());
+      dy = signed(flag >> 1, 1 + (((b0 % 12) >> 2) << 8) + glyphs.u8());
+    } else if (flag < 124) {
+      const b1 = glyphs.u8();
+      const b2 = glyphs.u8();
+      dx = signed(flag, (b1 << 4) + (b2 >> 4));
+      dy = signed(flag >> 1, ((b2 & 0x0f) << 8) + glyphs.u8());
+    } else {
+      dx = signed(flag, glyphs.u16());
+      dy = signed(flag >> 1, glyphs.u16());
+    }
+    xs[i] = dx;
+    ys[i] = dy;
+    x += dx;
+    y += dy;
+    if (x < xMin) xMin = x;
+    if (x > xMax) xMax = x;
+    if (y < yMin) yMin = y;
+    if (y > yMax) yMax = y;
+  }
+  const program = instructions.take(glyphs.u255());
+  if (box) {
+    xMin = box.i16();
+    yMin = box.i16();
+    xMax = box.i16();
+    yMax = box.i16();
+  }
+
+  const out = new Uint8Array(10 + count * 2 + 2 + program.length + points * 5);
+  const view = new DataView(out.buffer);
+  view.setInt16(0, count);
+  view.setInt16(2, xMin);
+  view.setInt16(4, yMin);
+  view.setInt16(6, xMax);
+  view.setInt16(8, yMax);
+  let pos = 10;
+  for (const end of ends) {
+    view.setUint16(pos, end);
+    pos += 2;
+  }
+  view.setUint16(pos, program.length);
+  pos += 2;
+  out.set(program, pos);
+  pos += program.length;
+  for (let i = 0; i < points; i += 1) out[pos + i] = on[i] ? ON_CURVE : 0;
+  if (overlap && points) out[pos] |= OVERLAP_SIMPLE;
+  pos += points;
+  for (let i = 0; i < points; i += 1) view.setInt16(pos + i * 2, xs[i]);
+  pos += points * 2;
+  for (let i = 0; i < points; i += 1) view.setInt16(pos + i * 2, ys[i]);
+  return out;
+}
+
+function compositeGlyph(count, { composites, glyphs, instructions, box }) {
+  // the components are in the stream as they are in a glyf table
+  const from = composites.pos;
+  let flags;
+  let programmed = false;
+  do {
+    flags = composites.u16();
+    let size = 2 + (flags & ARGS_ARE_WORDS ? 4 : 2);
+    if (flags & HAS_SCALE) size += 2;
+    else if (flags & HAS_XY_SCALE) size += 4;
+    else if (flags & HAS_TWO_BY_TWO) size += 8;
+    composites.take(size);
+    if (flags & HAS_INSTRUCTIONS) programmed = true;
+  } while (flags & MORE_COMPONENTS);
+  const components = composites.bytes.subarray(from, composites.pos);
+  const program = programmed ? instructions.take(glyphs.u255()) : null;
+
+  const out = new Uint8Array(10 + components.length + (program ? 2 + program.length : 0));
+  const view = new DataView(out.buffer);
+  view.setInt16(0, count);
+  for (let i = 0; i < 4; i += 1) view.setInt16(2 + i * 2, box.i16());
+  out.set(components, 10);
+  if (program) {
+    view.setUint16(10 + components.length, program.length);
+    out.set(program, 12 + components.length);
+  }
+  return out;
+}
+
+/** Where a `head` table says which of `loca`'s two formats the font uses. */
+const LOCA_FORMAT = 50;
+
+/** A table's checksum: its bytes as 32-bit numbers, the last one padded. */
+function checksum(data) {
+  let sum = 0;
+  const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+  const whole = data.length & ~3;
+  for (let i = 0; i < whole; i += 4) sum = (sum + view.getUint32(i)) >>> 0;
+  let last = 0;
+  for (let i = whole; i < data.length; i += 1) last |= data[i] << (24 - (i - whole) * 8);
+  return (sum + (last >>> 0)) >>> 0;
+}
+
+/** An sfnt of `tables`, each `{ tag, data }`, under a version `flavor`. */
+function assemble(flavor, tables) {
+  tables.sort((a, b) => (a.tag < b.tag ? -1 : a.tag > b.tag ? 1 : 0));
+  const count = tables.length;
+  let size = 12 + count * 16;
+  for (const table of tables) size += (table.data.length + 3) & ~3;
+  const out = new Uint8Array(size);
+  const view = new DataView(out.buffer);
+  const power = Math.floor(Math.log2(count));
+  view.setUint32(0, flavor);
+  view.setUint16(4, count);
+  view.setUint16(6, 16 << power);
+  view.setUint16(8, power);
+  view.setUint16(10, count * 16 - (16 << power));
+  let offset = 12 + count * 16;
+  tables.forEach(({ tag, data }, i) => {
+    const entry = 12 + i * 16;
+    for (let c = 0; c < 4; c += 1) out[entry + c] = tag.charCodeAt(c);
+    view.setUint32(entry + 4, checksum(data));
+    view.setUint32(entry + 8, offset);
+    view.setUint32(entry + 12, data.length);
+    out.set(data, offset);
+    offset += (data.length + 3) & ~3;
+  });
+  return out;
+}
+
+/** `ttcf`: a collection, which neither container is read as here. */
+const COLLECTION = 0x74746366;
+
+/**
+ * The sfnt inside a font fontkit read out of a WOFF or a WOFF2, or null
+ * where there is none to be had: a font that is not in a container, a
+ * collection, or a WOFF2 whose `hmtx` is transformed, which fontkit does
+ * not read either.
+ *
+ * Reads fontkit's own state — its directory, and the tables as it inflated
+ * or decompressed them — so the bytes are decompressed once, by the code
+ * that already does it.
+ *
+ * @param {object} fk a fontkit font
+ * @returns {Uint8Array|null}
+ */
+export function sfntOf(fk) {
+  const entries = fk?.directory?.tables;
+  if (!entries || fk.directory.flavor === COLLECTION) return null;
+  const tables = [];
+
+  if (fk.type === 'WOFF') {
+    for (const tag of Object.keys(entries)) {
+      const entry = entries[tag];
+      const stream = fk._getTableStream(tag);
+      // a table deflated in the file is a stream of its own, and one that
+      // was stored is the file's, at the table
+      const data =
+        stream === fk.stream
+          ? fk.stream.buffer.subarray(entry.offset, entry.offset + entry.length)
+          : stream.buffer;
+      tables.push({ tag, data });
+    }
+    return assemble(fk.directory.flavor, tables);
+  }
+
+  if (fk.type !== 'WOFF2') return null;
+  fk._decompress();
+  const bytes = fk.stream.buffer;
+  const stored = (entry) =>
+    bytes.subarray(entry.offset, entry.offset + (entry.transformLength ?? entry.length));
+  for (const tag of Object.keys(entries)) {
+    const entry = entries[tag];
+    if (tag === 'loca' && entries.glyf?.transformed) continue;
+    if (tag === 'glyf' && entry.transformed) {
+      const { glyf, loca } = untransformGlyf(stored(entry));
+      tables.push({ tag: 'glyf', data: glyf }, { tag: 'loca', data: loca });
+    } else if (entry.transformed) {
+      return null;
+    } else if (tag === 'head' && entries.glyf?.transformed) {
+      // `loca` is written long, whatever it was
+      const head = stored(entry).slice();
+      new DataView(head.buffer).setInt16(LOCA_FORMAT, 1);
+      tables.push({ tag, data: head });
+    } else {
+      tables.push({ tag, data: stored(entry) });
+    }
+  }
+  return assemble(fk.directory.flavor, tables);
+}

package/lib/widgets/svgview.js

@@ -16,8 +16,9 @@
 //
 // Supported: path/rect/circle/ellipse/line/polyline/polygon, <g>, <defs>,
 // <use>, linear/radial gradients (objectBoundingBox and userSpaceOnUse),
-// transform lists, opacity/fill-opacity/stroke-opacity, fill-rule, basic
-// <text>. See docs/svg.md for the full surface and limitations.
+// transform lists, opacity/fill-opacity/stroke-opacity, display, visibility,
+// nested <svg> viewports, fill-rule, basic <text>. See docs/svg.md for the
+// full surface and limitations.
 
 import { textContent } from 'domutils';
 import { parseDocument } from 'htmlparser2';
@@ -37,7 +38,8 @@ const INHERITED = {
   color: '#000',
   fontFamily: 'sans-serif',
   fontSize: 16,
-  textAnchor: 'start'
+  textAnchor: 'start',
+  visibility: 'visible'
 };
 
 const STYLE_ATTRS = {
@@ -53,10 +55,13 @@ const STYLE_ATTRS = {
   color: 'color',
   'font-family': 'fontFamily',
   'font-size': 'fontSize',
-  'text-anchor': 'textAnchor'
+  'text-anchor': 'textAnchor',
+  visibility: 'visibility'
 };
 
-const NUMERIC = new Set(['strokeWidth', 'miterLimit', 'fillOpacity', 'strokeOpacity', 'fontSize']);
+const NUMERIC = new Set(['strokeWidth', 'miterLimit', 'fontSize']);
+const ALPHA = new Set(['fillOpacity', 'strokeOpacity']);
+const VISIBILITY = new Set(['visible', 'hidden', 'collapse']);
 
 // documents may come from an XML parse (setSvg: exact case) or from an HTML
 // parse (inline <svg>: tag/attribute names lowercased) — compare
@@ -76,6 +81,99 @@ function attrNum(node, name, fallback = 0) {
   return Number.isFinite(n) ? n : fallback;
 }
 
+/**
+ * A property that is not inherited, as an element sets it itself: in its
+ * `style`, the last declaration of it there that `read` makes something
+ * of, or else by its presentation attribute — the order `resolveStyle`
+ * applies the inherited ones in. `undefined` where it sets it neither way.
+ */
+function ownProperty(node, name, read) {
+  const raw = attr(node, name);
+  let v = raw === undefined ? undefined : read(raw);
+  const style = node.attribs?.style;
+  if (style && style.includes(name)) {
+    for (const decl of style.split(';')) {
+      const idx = decl.indexOf(':');
+      if (idx > 0 && decl.slice(0, idx).trim() === name) v = read(decl.slice(idx + 1)) ?? v;
+    }
+  }
+  return v;
+}
+
+const keyword = (raw) => String(raw).trim().toLowerCase() || undefined;
+
+/**
+ * Whether an element is `display: none`, by its attribute or in its
+ * `style`, which wins. Such an element is not rendered, and nor is anything
+ * in it, whatever that says of itself: `display` is not inherited, and a
+ * child's `display="inline"` brings nothing back (SVG 1.1, 11.5). That is
+ * how an editor writes a hidden layer — Illustrator's `<g display="none">`
+ * around shapes it marks `display="inline"`.
+ */
+function displayNone(node) {
+  return ownProperty(node, 'display', keyword) === 'none';
+}
+
+/**
+ * An `<alpha-value>` — `opacity`, `fill-opacity`, `stroke-opacity`: a number
+ * or a percentage, clamped to 0..1 (CSS Color 4, 5.2). `undefined` for
+ * anything else, so the caller keeps what it had.
+ */
+function alphaValue(raw) {
+  const v = String(raw ?? '').trim();
+  let n = parseFloat(v);
+  if (!Number.isFinite(n)) return undefined;
+  if (v.endsWith('%')) n /= 100;
+  return Math.min(1, Math.max(0, n));
+}
+
+/** A `viewBox` as `[minX, minY, width, height]`, or null where it has none. */
+function parseViewBox(node) {
+  const vb = (attr(node, 'viewBox') || '')
+    .split(/[\s,]+/)
+    .filter((s) => s !== '')
+    .map(parseFloat);
+  return vb.length === 4 && vb.every(Number.isFinite) ? vb : null;
+}
+
+/**
+ * A length on a viewport-establishing element — `x`, `y`, `width`, `height`
+ * — in the user units of the viewport it sits in, `size` along its axis;
+ * a percentage is of that. `auto` and a missing or unreadable value are the
+ * `fallback`.
+ */
+function viewportLength(node, name, size, fallback) {
+  const v = String(attr(node, name) ?? '').trim();
+  const n = parseFloat(v);
+  if (!Number.isFinite(n)) return fallback;
+  return v.endsWith('%') ? (n / 100) * size : n;
+}
+
+const ALIGN = /^x(Min|Mid|Max)Y(Min|Mid|Max)$/;
+const ALONG = { Min: 0, Mid: 0.5, Max: 1 };
+
+/**
+ * The transform that fits a `viewBox` into a viewport `w` by `h` at `x`,`y`,
+ * as `preserveAspectRatio` asks (SVG 2, 8.8): scaled evenly to fit inside
+ * (`meet`, the default) or to cover it (`slice`), and set where its
+ * alignment says, `xMidYMid` by default; or stretched to it for `none`.
+ *
+ * @returns {[number, number, number, number]} `[sx, sy, tx, ty]`
+ */
+function viewBoxFit([minX, minY, vbW, vbH], x, y, w, h, par) {
+  const words = String(par || '').trim().split(/\s+/);
+  if (words[0] === 'defer') words.shift();
+  const [align, meetOrSlice] = words;
+  let sx = w / vbW;
+  let sy = h / vbH;
+  if (align === 'none') return [sx, sy, x - minX * sx, y - minY * sy];
+  // a value it cannot read is the default as a whole, xMidYMid meet
+  const m = ALIGN.exec(align || '');
+  const [fx, fy] = m ? [ALONG[m[1]], ALONG[m[2]]] : [0.5, 0.5];
+  sx = sy = m && meetOrSlice === 'slice' ? Math.max(sx, sy) : Math.min(sx, sy);
+  return [sx, sy, x - minX * sx + (w - vbW * sx) * fx, y - minY * sy + (h - vbH * sy) * fy];
+}
+
 const NON_RENDERED = new Set([
   'defs', 'title', 'desc', 'metadata', 'symbol', 'style',
   'lineargradient', 'radialgradient', 'clippath', 'mask', 'filter', 'pattern', 'marker'
@@ -202,6 +300,45 @@ function pathBBox(path) {
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
 
+/**
+ * The inherited properties an element ends up with: its parent's, where
+ * the element sets them neither by presentation attribute nor in its inline
+ * `style`, which wins over the attribute. A value it cannot read is dropped,
+ * as CSS drops an invalid declaration. Returns `parent` itself where
+ * nothing changes.
+ */
+function resolveStyle(node, parent) {
+  let style = parent;
+  const own = () => (style === parent ? (style = { ...parent }) : style);
+  const apply = (name, raw) => {
+    const key = STYLE_ATTRS[name];
+    if (!key || raw === undefined || raw === '' || raw === 'inherit') return;
+    const v = String(raw).trim();
+    if (NUMERIC.has(key)) {
+      const n = parseFloat(v);
+      if (!Number.isFinite(n)) return;
+      own()[key] = n;
+    } else if (ALPHA.has(key)) {
+      const n = alphaValue(v);
+      if (n === undefined) return;
+      own()[key] = n;
+    } else if (key === 'visibility') {
+      const k = v.toLowerCase();
+      if (!VISIBILITY.has(k)) return;
+      own()[key] = k;
+    } else {
+      own()[key] = v;
+    }
+  };
+  for (const [name, value] of Object.entries(node.attribs || {})) apply(name, value);
+  // inline style="" wins over presentation attributes
+  for (const decl of (node.attribs?.style || '').split(';')) {
+    const idx = decl.indexOf(':');
+    if (idx > 0) apply(decl.slice(0, idx).trim(), decl.slice(idx + 1).trim());
+  }
+  return style;
+}
+
 /**
  * How many distinct colours a document actually commits to, decided once at
  * parse time.
@@ -216,11 +353,13 @@ function pathBBox(path) {
  * Opacity does not enter into it: `opacity`, `fill-opacity` and
  * `stroke-opacity` scale coverage, which a mask carries perfectly well.
  *
- * The walk mirrors `_style` and `_renderNode` — fill and stroke inherit,
- * inline `style` beats the presentation attribute, the initial fill is black
- * and the initial stroke is none, `<line>` never fills, `<use>` paints its
- * target with the *use* element's style, and non-rendered subtrees
- * contribute nothing. It starts at the root element itself, because `draw`
+ * The walk mirrors `_renderNode`, and reads style with the same
+ * `resolveStyle` — fill and stroke inherit, inline `style` beats the
+ * presentation attribute, the initial fill is black and the initial stroke
+ * is none, `<line>` never fills, `<use>` paints its target with the *use*
+ * element's style, a shape whose inherited `visibility` is not `visible`
+ * paints nothing, and non-rendered and `display: none` subtrees contribute
+ * nothing. It starts at the root element itself, because `draw`
  * does: the root `<svg>` is an ordinary element for inheritance, and every
  * mainstream icon set puts `fill`/`stroke` there (issue #306). The two walks
  * have to agree — a scan that skipped the root would disagree with what is
@@ -234,59 +373,48 @@ function scanPaints(root, ids) {
   const paints = new Set();
   let multi = false;
 
-  const paintOf = (node, name, inherited) => {
-    let v = attr(node, name);
-    for (const decl of (node.attribs?.style || '').split(';')) {
-      const idx = decl.indexOf(':');
-      if (idx > 0 && decl.slice(0, idx).trim() === name) v = decl.slice(idx + 1);
-    }
-    if (v === undefined || v === '' || v === 'inherit') return inherited;
-    return String(v).trim();
-  };
-
   const note = (paint) => {
     if (paint === 'none') return;
     if (/^url\(/i.test(paint)) multi = true;
     else paints.add(paint);
   };
 
-  const kids = (node, fill, stroke, depth) => {
+  const kids = (node, style, depth) => {
     for (const child of node.children || []) {
-      if (child.type === 'tag') visit(child, fill, stroke, depth + 1);
+      if (child.type === 'tag') visit(child, style, depth + 1);
     }
   };
 
-  const visit = (node, fill, stroke, depth) => {
+  const visit = (node, parent, depth) => {
     if (multi || depth > 32) return;
     const name = tag(node);
-    if (NON_RENDERED.has(name)) return;
-    const f = paintOf(node, 'fill', fill);
-    const s = paintOf(node, 'stroke', stroke);
+    if (NON_RENDERED.has(name) || displayNone(node)) return;
+    const style = resolveStyle(node, parent);
     switch (name) {
       case 'svg':
       case 'g':
       case 'a':
-        kids(node, f, s, depth);
+        kids(node, style, depth);
         return;
       case 'use': {
         const href = node.attribs?.href || node.attribs?.['xlink:href'] || '';
         const target = href.startsWith('#') ? ids.get(href.slice(1)) : null;
         if (!target) return;
         // <symbol> is non-rendered on its own but renders through <use>
-        if (tag(target) === 'symbol') kids(target, f, s, depth);
-        else visit(target, f, s, depth + 1);
+        if (tag(target) === 'symbol') kids(target, style, depth);
+        else visit(target, style, depth + 1);
         return;
       }
-      case 'text':
-        note(f);
-        return;
       default:
-        if (name !== 'line') note(f);
-        note(s);
+        // a hidden shape paints nothing, though what is in a hidden
+        // group may show itself again
+        if (style.visibility !== 'visible') return;
+        if (name !== 'line') note(style.fill);
+        if (name !== 'text') note(style.stroke);
     }
   };
 
-  visit(root, INHERITED.fill, INHERITED.stroke, 0);
+  visit(root, INHERITED, 0);
   return {
     kind: multi || paints.size > 1 ? 'multi' : 'mono',
     solo: paints.size === 1 ? [...paints][0] : null
@@ -313,6 +441,7 @@ export default class SvgView {
 
     this._root = null;
     this._ids = new Map();
+    this._viewport = [0, 0];
     this.naturalWidth = 0;
     this.naturalHeight = 0;
     this.viewBox = null;
@@ -370,11 +499,7 @@ export default class SvgView {
     this.soloPaint = scanned.solo;
 
     const a = this._root.attribs || {};
-    const vb = (attr(this._root, 'viewBox') || '')
-      .split(/[\s,]+/)
-      .filter((s) => s !== '')
-      .map(parseFloat);
-    this.viewBox = vb.length === 4 && vb.every(Number.isFinite) ? vb : null;
+    this.viewBox = parseViewBox(this._root);
     const w = parseFloat(a.width);
     const h = parseFloat(a.height);
     this.naturalWidth = Number.isFinite(w) && !String(a.width || '').endsWith('%') ? w : this.viewBox ? this.viewBox[2] : 300;
@@ -423,14 +548,19 @@ export default class SvgView {
     if (!this._root) return;
     ctx.save();
     ctx.translate(x, y);
+    // the user-space size of the viewport, what a nested <svg>'s
+    // percentages are of
+    this._viewport = [w, h];
     if (this.viewBox) {
       const [minX, minY, vbW, vbH] = this.viewBox;
       if (vbW > 0 && vbH > 0) {
         ctx.scale(w / vbW, h / vbH);
         ctx.translate(-minX, -minY);
+        this._viewport = [vbW, vbH];
       }
     } else if (this.naturalWidth > 0 && this.naturalHeight > 0) {
       ctx.scale(w / this.naturalWidth, h / this.naturalHeight);
+      this._viewport = [this.naturalWidth, this.naturalHeight];
     }
     this._renderChildren(
       this._root,
@@ -445,27 +575,7 @@ export default class SvgView {
   // ------------------------------------------------------------------
 
   _style(node, parent) {
-    let style = parent;
-    const own = () => (style === parent ? (style = { ...parent }) : style);
-    const apply = (name, raw) => {
-      const key = STYLE_ATTRS[name];
-      if (!key || raw === undefined || raw === '' || raw === 'inherit') return;
-      let v = String(raw).trim();
-      if (NUMERIC.has(key)) {
-        const n = parseFloat(v);
-        if (!Number.isFinite(n)) return;
-        own()[key] = n;
-      } else {
-        own()[key] = v;
-      }
-    };
-    for (const [name, value] of Object.entries(node.attribs || {})) apply(name, value);
-    // inline style="" wins over presentation attributes
-    for (const decl of (node.attribs?.style || '').split(';')) {
-      const idx = decl.indexOf(':');
-      if (idx > 0) apply(decl.slice(0, idx).trim(), decl.slice(idx + 1).trim());
-    }
-    return style;
+    return resolveStyle(node, parent);
   }
 
   _paint(ctx, value, style, path) {
@@ -477,9 +587,38 @@ export default class SvgView {
     return this._gradient(ctx, node, path);
   }
 
+  /**
+   * A gradient and the gradients it takes after: the one its `href` names,
+   * the one that names, and so on (SVG 1.1, 13.2.2). What a gradient does
+   * not set itself it takes from the first of these that sets it, and its
+   * stops, where it has none, from the first that has some. An editor
+   * writes a drawing's colours once, in a gradient of stops alone, and
+   * every gradient that uses them as one line with an `xlink:href` to it:
+   * read without it, each had no stops, and what it filled was not drawn.
+   */
+  _gradientChain(node) {
+    const chain = [node];
+    for (let at = node; chain.length < 32;) {
+      const href = attr(at, 'href') || attr(at, 'xlink:href') || '';
+      const next = href.startsWith('#') ? this._ids.get(href.slice(1)) : null;
+      if (!next || chain.includes(next)) break;
+      if (tag(next) !== 'lineargradient' && tag(next) !== 'radialgradient') break;
+      chain.push(next);
+      at = next;
+    }
+    return chain;
+  }
+
   _gradient(ctx, node, path) {
-    const a = node.attribs || {};
-    const units = attr(node, 'gradientUnits') || 'objectBoundingBox';
+    const chain = this._gradientChain(node);
+    const own = (name) => {
+      for (const from of chain) {
+        const value = attr(from, name);
+        if (value !== undefined) return value;
+      }
+      return undefined;
+    };
+    const units = own('gradientUnits') || 'objectBoundingBox';
     const bbox = units === 'objectBoundingBox' ? pathBBox(path) : null;
     const coord = (raw, fallback, axis) => {
       let v = raw === undefined ? fallback : parseFloat(raw);
@@ -488,26 +627,45 @@ export default class SvgView {
       if (!bbox) return v;
       return axis === 'x' ? bbox.x + v * bbox.w : bbox.y + v * bbox.h;
     };
+    // `gradientTransform` is set in the gradient's own space, the bounding
+    // box's where that is its units: here, as the matrix it comes to in
+    // the path's user space
+    const matrix = gradientMatrix(own('gradientTransform'), bbox);
     // gradient coordinates are user space, like the path's own — the
     // context resolves them against the transform in force when it paints,
     // which is this one (issue #271)
     let gradient;
     if (tag(node) === 'lineargradient') {
-      const x1 = coord(a.x1, 0, 'x');
-      const y1 = coord(a.y1, 0, 'y');
-      const x2 = coord(a.x2, 1, 'x');
-      const y2 = coord(a.y2, 0, 'y');
+      let x1 = coord(own('x1'), 0, 'x');
+      let y1 = coord(own('y1'), 0, 'y');
+      let x2 = coord(own('x2'), 1, 'x');
+      let y2 = coord(own('y2'), 0, 'y');
+      if (matrix) [x1, y1, x2, y2] = transformedLine(matrix, x1, y1, x2, y2);
       gradient = ctx.createLinearGradient(x1, y1, x2, y2);
     } else {
-      const cx = coord(a.cx, 0.5, 'x');
-      const cy = coord(a.cy, 0.5, 'y');
-      let r = a.r === undefined ? 0.5 : parseFloat(a.r);
-      if (String(a.r ?? '').endsWith('%')) r /= 100;
+      let cx = coord(own('cx'), 0.5, 'x');
+      let cy = coord(own('cy'), 0.5, 'y');
+      const raw = own('r');
+      let r = raw === undefined ? 0.5 : parseFloat(raw);
+      if (String(raw ?? '').endsWith('%')) r /= 100;
       if (bbox) r *= (bbox.w + bbox.h) / 2;
+      if (matrix) {
+        // a circle's centre goes where the matrix takes it, and its radius
+        // grows by what the matrix scales an area by: exact for a matrix
+        // that turns, moves and scales evenly, and a circle of the same
+        // area where one stretches it into an ellipse, which a context's
+        // radial gradient is not
+        const [a, b, c, d, e, f] = matrix;
+        [cx, cy] = [a * cx + c * cy + e, b * cx + d * cy + f];
+        r *= Math.sqrt(Math.abs(a * d - b * c));
+      }
       gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
     }
 
-    for (const stop of node.children || []) {
+    const stops = chain.find((from) =>
+      (from.children || []).some((child) => child.type === 'tag' && tag(child) === 'stop')
+    );
+    for (const stop of stops?.children || []) {
       if (stop.type !== 'tag' || tag(stop) !== 'stop') continue;
       const sa = stop.attribs || {};
       const decls = {};
@@ -536,14 +694,55 @@ export default class SvgView {
     }
   }
 
+  /**
+   * A nested `<svg>`, which is a new viewport and not a group (SVG 2, 8.2):
+   * `width` by `height` at `x`,`y` of the user space it sits in, all of the
+   * viewport around it where they are unset, and percentages of that. Its
+   * `viewBox` is fitted in as `preserveAspectRatio` says, and what it draws
+   * is clipped to it unless its `overflow` is `visible` or `auto`. A zero
+   * or negative size, or a zero-sized `viewBox`, draws nothing.
+   */
+  _renderViewport(node, ctx, style, alpha, depth) {
+    const outer = this._viewport;
+    const [pw, ph] = outer;
+    const x = viewportLength(node, 'x', pw, 0);
+    const y = viewportLength(node, 'y', ph, 0);
+    const w = viewportLength(node, 'width', pw, pw);
+    const h = viewportLength(node, 'height', ph, ph);
+    if (!(w > 0) || !(h > 0)) return;
+    // a negative size makes the viewBox an error, and it is ignored
+    let vb = parseViewBox(node);
+    if (vb && (vb[2] === 0 || vb[3] === 0)) return;
+    if (vb && (vb[2] < 0 || vb[3] < 0)) vb = null;
+
+    ctx.save();
+    const overflow = ownProperty(node, 'overflow', keyword);
+    if (overflow !== 'visible' && overflow !== 'auto') {
+      const clip = new Path2D();
+      clip.rect(x, y, w, h);
+      ctx.clip(clip);
+    }
+    if (vb) {
+      const [sx, sy, tx, ty] = viewBoxFit(vb, x, y, w, h, attr(node, 'preserveAspectRatio'));
+      ctx.transform(sx, 0, 0, sy, tx, ty);
+      this._viewport = [vb[2], vb[3]];
+    } else {
+      if (x || y) ctx.translate(x, y);
+      this._viewport = [w, h];
+    }
+    this._renderChildren(node, ctx, style, alpha, depth + 1);
+    this._viewport = outer;
+    ctx.restore();
+  }
+
   _renderNode(node, ctx, parentStyle, alpha, depth) {
     if (depth > 32) return;
     const name = tag(node);
-    if (NON_RENDERED.has(name)) return;
+    if (NON_RENDERED.has(name) || displayNone(node)) return;
 
     const style = this._style(node, parentStyle);
-    const opacity = parseFloat(node.attribs?.opacity ?? '1');
-    const nodeAlpha = alpha * (Number.isFinite(opacity) ? Math.min(1, Math.max(0, opacity)) : 1);
+    // not inherited: a group's multiplies down through what is in it
+    const nodeAlpha = alpha * (ownProperty(node, 'opacity', alphaValue) ?? 1);
     if (nodeAlpha <= 0) return;
 
     const transforms = parseSvgTransform(node.attribs?.transform);
@@ -555,6 +754,8 @@ export default class SvgView {
 
     switch (name) {
       case 'svg':
+        this._renderViewport(node, ctx, style, nodeAlpha, depth);
+        break;
       case 'g':
       case 'a':
         this._renderChildren(node, ctx, style, nodeAlpha, depth + 1);
@@ -574,9 +775,13 @@ export default class SvgView {
         break;
       }
       case 'text':
-        this._renderText(node, ctx, style, nodeAlpha);
+        if (style.visibility === 'visible') this._renderText(node, ctx, style, nodeAlpha);
         break;
       default: {
+        // `visibility` hides what an element paints itself, and is
+        // inherited: a group walks on, since what is in it may say
+        // `visible` again
+        if (style.visibility !== 'visible') break;
         const path = shapePath(node);
         if (!path) break;
         if (name !== 'line' && style.fill !== 'none') {
@@ -627,6 +832,58 @@ export default class SvgView {
 }
 
 // fold an opacity into a CSS color by going through rgba()
+/**
+ * A `gradientTransform` as one matrix in the path's user space, or null
+ * where there is none. With `objectBoundingBox` units the transform is set
+ * in the box's own 0-to-1 space, so it is carried out of it and back:
+ * `B · M · B⁻¹`, for the matrix `B` that takes that space to the box.
+ */
+function gradientMatrix(value, bbox) {
+  const list = parseSvgTransform(value);
+  if (!list.length) return null;
+  const mul = (m, n) => [
+    m[0] * n[0] + m[2] * n[1],
+    m[1] * n[0] + m[3] * n[1],
+    m[0] * n[2] + m[2] * n[3],
+    m[1] * n[2] + m[3] * n[3],
+    m[0] * n[4] + m[2] * n[5] + m[4],
+    m[1] * n[4] + m[3] * n[5] + m[5]
+  ];
+  let matrix = list.reduce(mul);
+  if (bbox) {
+    if (!(bbox.w > 0 && bbox.h > 0)) return null;
+    const box = [bbox.w, 0, 0, bbox.h, bbox.x, bbox.y];
+    const back = [1 / bbox.w, 0, 0, 1 / bbox.h, -bbox.x / bbox.w, -bbox.y / bbox.h];
+    matrix = mul(mul(box, matrix), back);
+  }
+  return matrix;
+}
+
+/**
+ * A linear gradient's line under a matrix. Its start goes where the matrix
+ * takes it. Its end does only where the matrix keeps right angles: the
+ * lines of one colour cross the gradient's line squarely, and go where the
+ * matrix takes *them*, so the new line is the one square to those, as long
+ * as takes it from the start's line of colour to the end's.
+ */
+function transformedLine([a, b, c, d, e, f], x1, y1, x2, y2) {
+  const px = a * x1 + c * y1 + e;
+  const py = b * x1 + d * y1 + f;
+  const qx = a * x2 + c * y2 + e;
+  const qy = b * x2 + d * y2 + f;
+  // a line of one colour runs square to the gradient's, (-dy, dx)
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lx = a * -dy + c * dx;
+  const ly = b * -dy + d * dx;
+  // the new line is square to that, (ly, -lx), and as long as (q - p) is
+  // along it
+  const n2 = lx * lx + ly * ly;
+  if (!(n2 > 0)) return [px, py, qx, qy];
+  const along = ((qx - px) * ly + (qy - py) * -lx) / n2;
+  return [px, py, px + ly * along, py - lx * along];
+}
+
 function rgbaWithAlpha(color, alpha) {
   // cheap path for #rrggbb / #rgb; anything else goes through rgba() string
   if (/^#([0-9a-f]{6})$/i.test(color)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.17.1",
+  "version": "8.17.4",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",