@weasel-js/svg 1.11.0 → 1.12.0

package/dist/index.js

@@ -1,5 +1,6 @@
-import { identity, multiply, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
-import { resolveCorners, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, pathThroughPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, DEFAULT_TEXT_STYLE, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
+import { identity, multiply, pathToD, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
+export { pathToD as serializePathD } from '@weasel-js/geom';
+import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, resolveStroke, pathThroughPoseFrame, resolveFill, pathInPoseFrame, poseLinearOf, poseFrameOf, INHERIT, DEFAULT_TEXT_FILL, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -1383,40 +1384,6 @@ function readPattern(el, onWarn) {
   if (!isIdentity([m[0], m[1], m[2], m[3], 0, 0])) paint.transform = [m[0], m[1], m[2], m[3]];
   return paint;
 }
-function serializePathD(given) {
-  const path = resolveCorners(given);
-  if (path.kind === "rect") {
-    const { x, y, width: width2, height: height2 } = path;
-    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width2)}v${trimNumber(height2)}h${trimNumber(-width2)}Z`;
-  }
-  const cmds = path.commands;
-  const xs = path.coords;
-  const out = [];
-  let ci = 0;
-  for (let i = 0; i < cmds.length; i++) {
-    const c = cmds[i];
-    if (c === PATH_M) {
-      out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c === PATH_L) {
-      out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c === PATH_C) {
-      out.push(
-        `C${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])} ${trimNumber(xs[ci + 4])} ${trimNumber(xs[ci + 5])}`
-      );
-      ci += 6;
-    } else if (c === PATH_Q) {
-      out.push(
-        `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
-      );
-      ci += 4;
-    } else if (c === PATH_Z) {
-      out.push("Z");
-    }
-  }
-  return out.join("");
-}
 
 // src/gradients.ts
 var WEASEL_NS = "urn:weasel-js:svg";
@@ -1722,7 +1689,7 @@ var PaintServerRegistry = class {
     }
     for (const path of this.clips) {
       parts.push(
-        `<clipPath id="${this.clipIds.get(path)}"><path d="${serializePathD(path)}"/></clipPath>`
+        `<clipPath id="${this.clipIds.get(path)}"><path d="${pathToD(path)}"/></clipPath>`
       );
     }
     parts.push("</defs>");
@@ -1736,7 +1703,7 @@ function defaultMarkerXml(id, entry, onWarn, key, size) {
   const name = key ?? id;
   const unit = size === void 0 ? 1 : resolveMarkerSize({ key: name, size }, 1);
   const path = entry.path({ size: unit, stroke: { paint: { kind: "solid", color: "#000" } } });
-  const d = serializePathD(path);
+  const d = pathToD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
   const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
   const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
@@ -2159,7 +2126,7 @@ function strokeOutlineXml(path, stroke, fillAttrs, transform) {
     ...stroke.markerEnd ? { markerEnd: stroke.markerEnd } : {}
   };
   const outline = strokeToPath(path, kit);
-  const attrs = [`d="${serializePathD(outline)}"`, ...fillAttrs, 'stroke="none"'];
+  const attrs = [`d="${pathToD(outline)}"`, ...fillAttrs, 'stroke="none"'];
   if (transform) attrs.push(transform);
   attrs.push(`${WEASEL_NS_PREFIX}:${ROLE}="${OUTLINE}"`);
   return `<path ${attrs.join(" ")}/>`;
@@ -2403,13 +2370,17 @@ var LineTracker = class {
     return Math.abs(lineHeight - DEFAULT_LINE_HEIGHT) < 1e-6 ? void 0 : lineHeight;
   }
 };
+var holdsOnlyText = (el) => !Array.from(el.childNodes).some(
+  (child) => child.nodeType === 1
+  /* ELEMENT_NODE */
+);
 function warnUnreadPositions(el, onWarn) {
   const tag = el.tagName.toLowerCase();
   for (const name of ["x", "y"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
   }
-  for (const name of tag === "tspan" ? ["rotate"] : ["dx", "rotate"]) {
+  for (const name of tag === "tspan" || holdsOnlyText(el) ? ["rotate"] : ["dx", "rotate"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (raw.split(/[\s,]+/).some((v) => parseFloat(v) !== 0 && v !== "")) {
       onWarn(`<${tag} ${name}="${raw}"> is not read; the glyphs keep their own advance and angle`);
@@ -2540,8 +2511,9 @@ function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
     return 0;
   }
   const raw = tspan.getAttribute("dx");
+  const tag = tspan.tagName.toLowerCase();
   if (COLLAPSIBLE.test(run.text)) {
-    onWarn(`<tspan dx="${raw}"> is not read: its text has white space SVG collapses, which moves the glyphs the list names`);
+    onWarn(`<${tag} dx="${raw}"> is not read: its text has white space SVG collapses, which moves the glyphs the list names`);
     line.push(run);
     return 0;
   }
@@ -2554,7 +2526,7 @@ function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
   } else if (dx[0] !== 0 && lines.length === 1) {
     lead = dx[0];
   } else if (dx[0] !== 0) {
-    onWarn(`<tspan dx="${raw}"> opens a line; the line starts at the box edge, and the rest of the list is read`);
+    onWarn(`<${tag} dx="${raw}"> opens a line; the line starts at the box edge, and the rest of the list is read`);
   }
   line.push(...spread(run, dx.slice(1), inherited2));
   return lead;
@@ -2716,7 +2688,10 @@ function readRuns(el, tracker, inheritedShift, letterSpacing, gradients, leafSty
   const push = (run) => {
     runLines[runLines.length - 1].push(run);
   };
-  for (let i = 0; i < el.childNodes.length; i++) {
+  if (holdsOnlyText(el) && el.hasAttribute("dx")) {
+    const t = el.textContent ?? "";
+    if (t) lead = placeTspanRun(el, { text: t, ...inheritedShift }, runLines, letterSpacing, onWarn);
+  } else for (let i = 0; i < el.childNodes.length; i++) {
     const child = el.childNodes[i];
     if (child.nodeType === 3) {
       const t = child.textContent ?? "";
@@ -3049,6 +3024,32 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
   };
 }
 
+// src/groupPaint.ts
+var NO_GROUP_PAINT = { fill: false, stroke: false };
+var STROKE_PROPS = INHERITED_PROPERTIES.filter((p) => p.startsWith("stroke") || p.startsWith("marker"));
+var sets = (el, prop) => {
+  const v = ownProp(el, prop);
+  return v != null && v.trim() !== "inherit";
+};
+var setsFill = (el) => sets(el, "fill");
+var setsStroke = (el) => STROKE_PROPS.some((p) => sets(el, p));
+function viewportPaintFrom(el, from) {
+  return { fill: from.fill && !setsFill(el), stroke: from.stroke && !setsStroke(el) };
+}
+function inheritsFrom(el, from) {
+  const fill = from.fill && !setsFill(el);
+  const stroke = from.stroke && !setsStroke(el);
+  return fill || stroke ? { inherits: { ...fill ? { fill: true } : {}, ...stroke ? { stroke: true } : {} } } : {};
+}
+function groupPaint(el, from, style, ctm, gradients, onWarn) {
+  const children = { fill: from.fill || setsFill(el), stroke: from.stroke || setsStroke(el) };
+  const paint = {};
+  if (children.fill) paint.fill = paintThroughMatrix(readPaint2(style, "fill", "#000000", gradients, onWarn), ctm);
+  const stroke = children.stroke ? readStroke(style, gradients, onWarn) : void 0;
+  if (stroke) paint.stroke = strokeThroughMatrix(stroke, ctm);
+  return { paint: { ...paint, ...inheritsFrom(el, from) }, children };
+}
+
 // src/parse.ts
 var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
 function parseSvg(svg, opts = {}) {
@@ -3081,7 +3082,7 @@ function parseSvg(svg, opts = {}) {
   for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
   const rootStyle = deriveStyle(EMPTY_STYLE, root);
   const clips = collectClipPaths(root, onWarn);
-  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix, opts.keepHidden === true);
+  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, NO_GROUP_PAINT, gradients, clips, onWarn, uriToPrefix, opts.keepHidden === true);
   const markers = ingestMarkers(root, nodes, gradients, onWarn);
   const result = { nodes, warnings };
   if (markers.length > 0) result.markers = markers;
@@ -3182,7 +3183,7 @@ function collectElementMeta(el, uriToPrefix) {
   }
   return Object.keys(meta).length > 0 ? meta : void 0;
 }
-function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+function parseChildren(parent, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const out = [];
   for (let i = 0; i < parent.children.length; i++) {
     const el = parent.children[i];
@@ -3190,7 +3191,7 @@ function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix
     if (ns && ns !== "http://www.w3.org/2000/svg" || isStrokeOutline(el)) continue;
     const hidden = isHiddenElement(el, style);
     if (hidden && !keepHidden) continue;
-    const node = unwrapStrokeGroup(el, parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden));
+    const node = unwrapStrokeGroup(el, parseElement(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden));
     if (!node) continue;
     const parsed = Array.isArray(node) ? node : [node];
     if (hidden) for (const n of parsed) n.hidden = true;
@@ -3198,7 +3199,7 @@ function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix
   }
   return out;
 }
-function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+function parseElement(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag)) return null;
   if (tag === "g" && el.hasAttribute("data-weasel-image")) {
@@ -3213,20 +3214,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (clipRaw != null && readProperty("clip-path", clipRaw) !== "none") {
     onWarn(`clip-path on <${tag}> is not modeled; only a <g> clips, so it is drawn unclipped`);
   }
-  if (tag === "g") {
-    const local = parseTransform(el.getAttribute("transform"), onWarn);
-    const childCtm = multiply(ctm, local);
-    const childStyle = deriveStyle(style, el);
-    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
-    const opacity2 = ownValue(el, "opacity");
-    const group = { kind: "group", children };
-    const clip = clipFor(el, childCtm, clips, onWarn);
-    if (clip) group.clip = clip;
-    if (opacity2 != null) group.opacity = opacity2;
-    const meta2 = collectElementMeta(el, uriToPrefix);
-    if (meta2) group.meta = meta2;
-    return group;
-  }
+  if (tag === "g") return parseGroup(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden);
   if (SUPPORTED_GROUP_TAGS.has(tag)) {
     const childStyle = deriveStyle(style, el);
     const x = parseFloat(el.getAttribute("x") ?? "0");
@@ -3235,13 +3223,14 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
     if (el.hasAttribute("viewBox")) {
       onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
     }
-    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
+    return parseChildren(el, multiply(ctm, offset), childStyle, viewportPaintFrom(el, from), gradients, clips, onWarn, uriToPrefix, keepHidden);
   }
   if (tag === "text") {
     const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
     if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
       const meta2 = collectElementMeta(el, uriToPrefix);
       if (meta2) textNode.meta = meta2;
+      Object.assign(textNode, inheritsFrom(el, from));
     }
     return textNode;
   }
@@ -3296,6 +3285,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (stroke) node.stroke = stroke;
   if (opacity != null) node.opacity = opacity;
   if (rotation != null) node.rotation = rotation;
+  Object.assign(node, inheritsFrom(el, from));
   if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
     node.fill = { kind: "none" };
   }
@@ -3303,6 +3293,20 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (meta) node.meta = meta;
   return node;
 }
+function parseGroup(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+  const childCtm = multiply(ctm, parseTransform(el.getAttribute("transform"), onWarn));
+  const childStyle = deriveStyle(style, el);
+  const paint = groupPaint(el, from, childStyle, childCtm, gradients, onWarn);
+  const children = parseChildren(el, childCtm, childStyle, paint.children, gradients, clips, onWarn, uriToPrefix, keepHidden);
+  const opacity = ownValue(el, "opacity");
+  const group = { kind: "group", children, ...paint.paint };
+  const clip = clipFor(el, childCtm, clips, onWarn);
+  if (clip) group.clip = clip;
+  if (opacity != null) group.opacity = opacity;
+  const meta = collectElementMeta(el, uriToPrefix);
+  if (meta) group.meta = meta;
+  return group;
+}
 function isHiddenElement(el, style) {
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag)) return false;
@@ -3537,6 +3541,61 @@ function strokeAttrsFor(stroke, registry, warn) {
   }
   return attrs;
 }
+
+// src/groupPaintXml.ts
+var FILL_ATTRS = ["fill", "fill-opacity"];
+var STROKE_ATTRS = [
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-miterlimit",
+  "marker-start",
+  "marker-mid",
+  "marker-end"
+];
+var INITIAL = {
+  "fill": "#000000",
+  "fill-opacity": "1",
+  "stroke": "none",
+  "stroke-width": "1",
+  "stroke-opacity": "1",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter",
+  "stroke-dasharray": "none",
+  "stroke-dashoffset": "0",
+  "stroke-miterlimit": "4",
+  "marker-start": "none",
+  "marker-mid": "none",
+  "marker-end": "none"
+};
+function groupPaintAttrs(node, registry, warn) {
+  const out = [];
+  if (node.fill && !node.inherits?.fill) out.push(...paintAttrs(node.fill, "fill", registry));
+  if (node.stroke && !node.inherits?.stroke) out.push(...strokeAttrsFor(node.stroke, registry, warn));
+  return out;
+}
+function attrNames(attrs) {
+  return attrs.map((a) => a.slice(0, a.indexOf("=")));
+}
+var START_TAG = /<(path|text)\b([^>]*?)(\/?)>/g;
+var ATTR = /\s([\w:-]+)="[^"]*"/g;
+function fitLeafXml(xml, inherits, painted) {
+  if (painted.size === 0 && !inherits) return xml;
+  const dropped = /* @__PURE__ */ new Set([...inherits?.fill ? FILL_ATTRS : [], ...inherits?.stroke ? STROKE_ATTRS : []]);
+  let first = true;
+  return xml.replace(START_TAG, (_tag, name, body, close2) => {
+    let attrs = body;
+    if (first) attrs = attrs.replace(ATTR, (whole, n) => dropped.has(n) ? "" : whole);
+    first = false;
+    const has = new Set([...attrs.matchAll(ATTR)].map((m) => m[1]));
+    const resets = [...painted].filter((n) => !has.has(n) && !dropped.has(n) && n in INITIAL);
+    return `<${name}${attrs}${resets.map((n) => ` ${n}="${INITIAL[n]}"`).join("")}${close2}>`;
+  });
+}
 function textXml(node, registry, namespaces, warn, given) {
   const layout = given && layoutMeasured(given, node.text) ? given : null;
   const x = node.x + anchorOffset(node.style, node.width, node.text);
@@ -3690,6 +3749,7 @@ function prettyXml(xml) {
 }
 
 // src/serialize.ts
+var NOTHING_PAINTED = /* @__PURE__ */ new Set();
 function serializeSvg(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -3732,6 +3792,8 @@ function registerPaintServers(nodes, registry) {
   for (const n of nodes) {
     if (n.kind === "group") {
       if (n.clip) registry.clipId(n.clip);
+      if (n.fill?.kind === "gradient" && !n.inherits?.fill) registry.register(n.fill.paint);
+      if (n.stroke?.paint.kind === "gradient" && !n.inherits?.stroke) registry.register(n.stroke.paint.paint);
       registerPaintServers(n.children, registry);
     } else if (n.kind === "path") {
       if (n.fill.kind === "gradient") registry.register(n.fill.paint);
@@ -3757,17 +3819,18 @@ function registerMarkers(stroke, registry) {
     if (ref !== void 0) registry.markerId(ref);
   }
 }
-function nodeXml(node, registry, namespaces, warn, layoutOf) {
-  const xml = kindXml(node, registry, namespaces, warn, layoutOf);
+function nodeXml(node, registry, namespaces, warn, layoutOf, painted = NOTHING_PAINTED) {
+  const kind = kindXml(node, registry, namespaces, warn, layoutOf, painted);
+  const xml = node.kind === "path" || node.kind === "text" ? fitLeafXml(kind, node.inherits, painted) : kind;
   if (!node.hidden) return xml;
   return xml.replace(/^<[\w:]+/, (open) => `${open} display="none"`).replace(/<path (?=[^>]*:role="stroke-outline")/, '<path display="none" ');
 }
-function kindXml(node, registry, namespaces, warn, layoutOf) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces, warn, layoutOf);
+function kindXml(node, registry, namespaces, warn, layoutOf, painted) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces, warn, layoutOf, painted);
   if (node.kind === "text") return textXml(node, registry, namespaces, warn, layoutOf?.(node));
   if (node.kind === "image") return imageXml(node, namespaces);
   const drawn = pathAsSvgDraws(node);
-  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn, layoutOf) : pathXml(drawn, registry, namespaces, warn);
+  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn, layoutOf, painted) : pathXml(drawn, registry, namespaces, warn);
 }
 function imageXml(node, namespaces) {
   const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
@@ -3791,8 +3854,11 @@ function imageXml(node, namespaces) {
   const head = ['<g data-weasel-image="true"', ...outer].join(" ");
   return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
 }
-function groupXml(node, registry, namespaces, warn, layoutOf) {
+function groupXml(node, registry, namespaces, warn, layoutOf, painted = NOTHING_PAINTED) {
   const attrs = [];
+  const paint = groupPaintAttrs(node, registry, warn);
+  for (const a of paint) attrs.push(a);
+  const below = paint.length === 0 ? painted : /* @__PURE__ */ new Set([...painted, ...attrNames(paint)]);
   if (node.transform) {
     const m = formatMatrix(node.transform);
     if (m) attrs.push(`transform="${m}"`);
@@ -3805,11 +3871,11 @@ function groupXml(node, registry, namespaces, warn, layoutOf) {
   }
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn, layoutOf)).join("");
+  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn, layoutOf, below)).join("");
   return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
 }
 function pathXml(node, registry, namespaces, warn) {
-  const attrs = [`d="${serializePathD(node.path)}"`];
+  const attrs = [`d="${pathToD(node.path)}"`];
   const fillAttrs = paintAttrs(node.fill, "fill", registry);
   for (const a of fillAttrs) attrs.push(a);
   if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
@@ -3892,6 +3958,19 @@ function fadeRun(run, k) {
     ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
   };
 }
+
+// src/draftTakes.ts
+var NO_TAKES = {};
+function takesOf(n, from, k) {
+  const inherits = n.kind === "path" || n.kind === "text" || n.kind === "group" ? n.inherits : void 0;
+  return { fill: inherits?.fill === true && from.fill === k, stroke: inherits?.stroke === true && from.stroke === k };
+}
+var solidOrNone = (p) => p === void 0 || p.kind === "solid" || p.kind === "none";
+function groupTakes(group, takes, k) {
+  const fill = group.inherits?.fill ? takes.fill : solidOrNone(group.fill);
+  const stroke = group.inherits?.stroke ? takes.stroke : solidOrNone(group.stroke?.paint);
+  return { ...fill ? { fill: k } : {}, ...stroke ? { stroke: k } : {} };
+}
 var CASCADE_OFFSET_PX = 24;
 var VIEWPORT_FIT = 0.9;
 function readFileText(file) {
@@ -3956,8 +4035,9 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     drafts.push({ kind: "leaf", id, parentId, pose, data: out, ...source.hidden ? { hidden: true } : {} });
     return pose;
   };
-  const visit = (n, parentId, inherited2) => {
+  const visit = (n, parentId, inherited2, from) => {
     const k = inherited2 * (n.opacity ?? 1);
+    const takes = takesOf(n, from, k);
     if (n.kind === "group") {
       const draft = {
         kind: "container",
@@ -3969,7 +4049,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
       };
       drafts.push(draft);
       const at = drafts.length - 1;
-      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
+      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k, groupTakes(n, takes, k))));
       if (!acc) {
         const kept = drafts.length > at + 1 || (options.keepEmpty?.(n) ?? false);
         if (!kept) drafts.splice(at, 1);
@@ -3977,6 +4057,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         return null;
       }
       draft.pose = n.clip ? boxOfPath(n.clip) : acc;
+      Object.assign(draft.data, containerPaint(n, takes, draft.pose, k));
       return draft.pose;
     }
     if (n.kind === "text") {
@@ -3994,16 +4075,15 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         width: pose2.width,
         height: pose2.height
       };
-      const fill2 = n.fill === void 0 && k !== 1 ? DEFAULT_TEXT_STYLE.fill : n.fill;
+      const fill2 = n.fill === void 0 ? DEFAULT_TEXT_FILL : n.fill;
       return pushLeaf(n, parentId, pose2, {
         text: n.text,
         ...n.style ? { style: n.style } : {},
         ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
         ...n.runs ? { runs: n.runs.map((r) => fadeRun(runInBoxFrame(r, box), k)) } : {},
-        // `!== undefined`, not a truthiness test: `null` is the document
-        // saying `fill="none"`, and absent takes the painter's default.
-        ...fill2 !== void 0 ? { fill: fill2 && mapFillPaint(fill2, (p) => fadeFill(fillInBoxFrame(p, box), k)) } : {},
-        ...n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
+        // `null` is the document saying `fill="none"`.
+        ...takes.fill ? { fill: INHERIT } : { fill: fill2 && mapFillPaint(fill2, (p) => fadeFill(fillInBoxFrame(p, box), k)) },
+        ...takes.stroke ? { stroke: INHERIT } : n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
       });
     }
     if (n.kind === "image") {
@@ -4027,13 +4107,21 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
     return pushLeaf(n, parentId, pose, {
       path: n.path,
-      ...fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
-      ...strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
+      ...takes.fill ? { fill: INHERIT } : fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
+      ...takes.stroke ? { stroke: INHERIT } : strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
     });
   };
-  for (const n of nodes) visit(n, null, 1);
+  for (const n of nodes) visit(n, null, 1, NO_TAKES);
   return drafts;
 }
+function containerPaint(n, takes, box, k) {
+  const fill = fillDataFromSvg(n.fill, box);
+  const stroke = strokeDataFromSvg(n.stroke, box);
+  return {
+    ...takes.fill ? { fill: INHERIT } : fill ? { fill: { paint: fadeFill(fill, k) } } : {},
+    ...takes.stroke ? { stroke: INHERIT } : stroke ? { stroke: fadeStroke(stroke, k) } : {}
+  };
+}
 function boxOfPath(path) {
   const b = boundsOfPath(path);
   return { x: b.x, y: b.y, width: b.width, height: b.height };
@@ -4122,8 +4210,9 @@ function svgPaintFromKit(fill, box) {
   }
   return { kind: "gradient", paint: fillInPoseFrame(fill, box) };
 }
-function svgStrokeFromKit(stroke, box) {
-  if (!stroke?.paint) return void 0;
+function svgStrokeFromKit(raw, box) {
+  const stroke = resolveStroke(raw);
+  if (!stroke) return void 0;
   const width2 = stroke.width ?? 1;
   if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return void 0;
   const opacity = stroke.paint.opacity;
@@ -4177,17 +4266,16 @@ function svgLeafFromKit(data, pose) {
     const text = svgTextFromKit({ ...data, text: data.text }, pose);
     const boxPath = { kind: "rect", x: pose.x, y: pose.y, width: pose.width, height: pose.height };
     const clip = data.overflow === "clip" ? { clip: pathThroughPoseFrame(boxPath, pose) } : {};
-    if (!data.background?.paint) return clip.clip ? { kind: "group", children: [text], ...clip } : text;
+    if (!resolveFill(data.background)) return clip.clip ? { kind: "group", children: [text], ...clip } : text;
     const box = svgLeafFromKit({ path: boxPath, fill: data.background }, pose);
     return { kind: "group", children: [box, text], ...clip };
   }
   if (!data.path) return null;
-  const stroke = svgStrokeFromKit(data.stroke, pose);
-  const fill = data.fill !== void 0 ? data.fill : stroke ? null : DEFAULT_SHAPE_FILL;
+  const stroke = svgStrokeFromKit(resolveStroke(data.stroke), pose);
   const node = {
     kind: "path",
     path: pathInPoseFrame(data.path, pose),
-    fill: svgPaintFromKit(fill?.paint ?? null, pose)
+    fill: svgPaintFromKit(resolveFill(data.fill)?.paint ?? null, pose)
   };
   if (stroke) node.stroke = stroke;
   const frame = poseLinearOf(pose) && poseFrameOf(pose);
@@ -4211,25 +4299,32 @@ function svgTextFromKit(data, pose) {
   if (data.style) node.style = data.style;
   if (data.runs) node.runs = data.runs.map((r) => runInPoseFrame(r, pose));
   if (data.verticalAlign) node.verticalAlign = data.verticalAlign;
-  if (data.fill !== void 0) node.fill = data.fill && mapFillPaint(data.fill, (p) => fillInPoseFrame(p, pose));
-  if (data.stroke) node.stroke = strokeInPoseFrame(data.stroke, pose);
+  const fill = resolveFill(data.fill);
+  node.fill = fill && mapFillPaint(fill, (p) => fillInPoseFrame(p, pose));
+  const stroke = resolveStroke(data.stroke);
+  if (stroke) node.stroke = strokeInPoseFrame(stroke, pose);
   if (pose.rotation) node.rotation = pose.rotation;
   if (pose.transform) node.transform = pose.transform;
   return node;
 }
 function svgNodesFromKit(tree, options = {}) {
   const { include, leaf, group } = options;
-  const emit = (id) => {
+  const emit = (id, up) => {
     const node = tree.get(id);
-    const out2 = node && (!include || include(id)) ? lower(id, node) : null;
+    const out2 = node && (!include || include(id)) ? lower(id, node, up) : null;
     return out2 && node?.hidden === true ? { ...out2, hidden: true } : out2;
   };
-  const lower = (id, node) => {
+  const lower = (id, node, up) => {
     if (node.kind === "container") {
+      const own2 = node.data;
+      const below = {
+        fill: own2?.fill === INHERIT ? up.fill : resolveFill(own2?.fill),
+        stroke: own2?.stroke === INHERIT ? up.stroke : resolveStroke(own2?.stroke)
+      };
       const emitChildren = () => {
         const children = [];
         for (const c of tree.childrenOf(id)) {
-          const child = emit(c);
+          const child = emit(c, below);
           if (child) children.push(child);
         }
         return children;
@@ -4238,7 +4333,7 @@ function svgNodesFromKit(tree, options = {}) {
       const clip = path ? pathThroughPoseFrame(pathInPoseFrame(path, node.pose), node.pose) : void 0;
       const copies = node.copiesFromPose?.(node.pose, node) ?? [];
       const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
-      let g = content();
+      let g = { ...content(), ...groupPaintFromKit(own2, below, node.pose) };
       if (copies.length > 0) {
         g = {
           kind: "group",
@@ -4247,16 +4342,44 @@ function svgNodesFromKit(tree, options = {}) {
       }
       return group ? group(id, g) : g;
     }
-    return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);
+    const data = node.data ?? {};
+    return markInherits(leaf ? leaf(id, node, up) : svgLeafFromKit(resolvedData(data, up), node.pose), data, up);
   };
   const out = [];
   for (const id of options.roots ?? tree.roots) {
-    const n = emit(id);
+    const n = emit(id, NO_UP_PAINT);
     if (n) out.push(n);
   }
   return out;
 }
+var NO_UP_PAINT = { fill: null, stroke: null };
+var carries = (p) => p != null && isSolidPaint(p.paint);
+function groupPaintFromKit(own2, below, pose) {
+  const out = {};
+  if (below.fill?.paint) out.fill = svgPaintFromKit(below.fill.paint, pose);
+  const stroke = svgStrokeFromKit(below.stroke, pose);
+  if (stroke) out.stroke = stroke;
+  const fill = own2?.fill === INHERIT && carries(below.fill);
+  const strokes = own2?.stroke === INHERIT && carries(below.stroke);
+  if (fill || strokes) out.inherits = { ...fill ? { fill: true } : {}, ...strokes ? { stroke: true } : {} };
+  return out;
+}
+function resolvedData(data, up) {
+  if (data.fill !== INHERIT && data.stroke !== INHERIT) return data;
+  return {
+    ...data,
+    ...data.fill === INHERIT ? { fill: up.fill } : {},
+    ...data.stroke === INHERIT ? { stroke: up.stroke } : {}
+  };
+}
+function markInherits(out, data, up) {
+  if (out === null || out.kind !== "path" && out.kind !== "text") return out;
+  const fill = data.fill === INHERIT && carries(up.fill);
+  const stroke = data.stroke === INHERIT && carries(up.stroke);
+  if (fill || stroke) out.inherits = { ...fill ? { fill: true } : {}, ...stroke ? { stroke: true } : {} };
+  return out;
+}
 
-export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializePathD, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
+export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, compareSpecificity, escapeAttr, escapeText, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, specificity, splitTopLevel, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map