diff --git a/CHANGELOG.md b/CHANGELOG.md index dee9eb43f..e3f7d5c1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Fixed +- Keep `fill="none"` and `stroke="none"` SVG paths transparent when rendering inline artwork. (#446) - Match regional browser languages to supported locales without selecting a secondary language. (#417) - Save auto-layout frames that stretch their children to `.fig` without failing. (#427) - Preserve multiple colors in imported vector artwork such as multi-color logos. (#386) diff --git a/packages/core/src/icons/svg.ts b/packages/core/src/icons/svg.ts index 316c0bb27..01176b625 100644 --- a/packages/core/src/icons/svg.ts +++ b/packages/core/src/icons/svg.ts @@ -154,6 +154,10 @@ function combinedTransform(parent: string | null, element: Element): string | nu return current ?? parent } +function normalizeSVGPaint(value: string | null): string | null { + return value?.trim().toLowerCase() === 'none' ? null : value +} + function appendShapePath( tagName: string, element: Element, @@ -167,8 +171,8 @@ function appendShapePath( const strokeWidth = Number.parseFloat(presentation.strokeWidth) result.push({ d: pathData, - fill: presentation.fill === 'none' ? null : presentation.fill, - stroke: presentation.stroke === 'none' ? null : presentation.stroke, + fill: normalizeSVGPaint(presentation.fill), + stroke: normalizeSVGPaint(presentation.stroke), strokeWidth: Number.isFinite(strokeWidth) ? strokeWidth : 1, strokeCap: presentation.strokeCap, strokeJoin: presentation.strokeJoin, @@ -285,8 +289,8 @@ export function scalePathInfos( : svgpath(path.d).scale(scaleX, scaleY).round(2).toString() return { vectorNetwork: parseSVGPath(scaledD, path.fillRule), - fill: path.fill, - stroke: path.stroke, + fill: normalizeSVGPaint(path.fill), + stroke: normalizeSVGPaint(path.stroke), strokeWidth: path.strokeWidth * Math.min(scaleX, scaleY), strokeCap: path.strokeCap, strokeJoin: path.strokeJoin diff --git a/tests/engine/render/jsx/gaps.test.ts b/tests/engine/render/jsx/gaps.test.ts index a019a6df0..cb254045d 100644 --- a/tests/engine/render/jsx/gaps.test.ts +++ b/tests/engine/render/jsx/gaps.test.ts @@ -41,6 +41,24 @@ describe('jsx gaps', () => { } }) + it('respects none paints on inline SVG paths', async () => { + const g = makeSceneGraph() + await renderJSX( + g, + ` + + + ` + ) + + const vectors = [...g.nodes.values()].filter((node) => node.type === 'VECTOR') + expect(vectors).toHaveLength(2) + expect(vectors[0].fills).toEqual([]) + expect(vectors[0].strokes).toHaveLength(1) + expect(vectors[1].fills).toHaveLength(1) + expect(vectors[1].strokes).toEqual([]) + }) + it('instance overrides apply child text by name', async () => { const g = makeSceneGraph() await renderJSX(