From 1e3cbe73b1c076f904e160b6579c75b475aaa62d Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Sat, 6 Feb 2021 08:02:18 -0500 Subject: [PATCH] Add support for shadows, bg color. --- lib/browser-main.tsx | 21 ++++++++++++++++----- svg/Crown 3 mod.svg | 11 +++++++++++ 2 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 svg/Crown 3 mod.svg diff --git a/lib/browser-main.tsx b/lib/browser-main.tsx index 616d0d4..adae15a 100644 --- a/lib/browser-main.tsx +++ b/lib/browser-main.tsx @@ -10,6 +10,9 @@ const appEl = document.getElementById(APP_ID); const SvgVocabulary: SvgSymbolData[] = _SvgVocabulary as any; +const BLACK = "#000000"; +const WHITE = "#ffffff"; + if (!appEl) { throw new Error(`Unable to find #${APP_ID}!`); } @@ -32,11 +35,18 @@ function reactifySvgSymbolElement( key: number ): JSX.Element { let { fill, stroke } = el.props; - if (fill && fill !== "none") { - fill = ctx.fill; - } - if (stroke && stroke !== "none") { - stroke = ctx.stroke; + if (fill === BLACK && stroke === "none") { + // The fill represents a "shadow" area, so use our stroke color here. + fill = ctx.stroke; + } else { + // Replace the hard-coded fill color with our fill color. + if (fill && fill !== "none") { + fill = ctx.fill; + } + // Replace the hard-coded stroke color with our stroke color. + if (stroke && stroke !== "none") { + stroke = ctx.stroke; + } } return React.createElement( el.tagName, @@ -96,6 +106,7 @@ const App: React.FC<{}> = () => { display: "inline-block", border: "1px solid black", margin: "4px", + backgroundColor: "#f0f0f0", }} >
+ + + + + + + + + +