ntk 8.17.1 → 8.17.3

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/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

@@ -76,6 +76,26 @@ function attrNum(node, name, fallback = 0) {
   return Number.isFinite(n) ? n : fallback;
 }
 
+/**
+ * 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) {
+  let v = attr(node, 'display');
+  const style = node.attribs?.style;
+  if (style && style.includes('display')) {
+    for (const decl of style.split(';')) {
+      const idx = decl.indexOf(':');
+      if (idx > 0 && decl.slice(0, idx).trim() === 'display') v = decl.slice(idx + 1);
+    }
+  }
+  return v !== undefined && String(v).trim().toLowerCase() === 'none';
+}
+
 const NON_RENDERED = new Set([
   'defs', 'title', 'desc', 'metadata', 'symbol', 'style',
   'lineargradient', 'radialgradient', 'clippath', 'mask', 'filter', 'pattern', 'marker'
@@ -259,7 +279,7 @@ function scanPaints(root, ids) {
   const visit = (node, fill, stroke, depth) => {
     if (multi || depth > 32) return;
     const name = tag(node);
-    if (NON_RENDERED.has(name)) return;
+    if (NON_RENDERED.has(name) || displayNone(node)) return;
     const f = paintOf(node, 'fill', fill);
     const s = paintOf(node, 'stroke', stroke);
     switch (name) {
@@ -477,9 +497,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 +537,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 = {};
@@ -539,7 +607,7 @@ export default class SvgView {
   _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');
@@ -627,6 +695,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.3",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",