Add support for shadows, bg color.

pull/1/head
Atul Varma 2021-02-06 08:02:18 -05:00
rodzic 5df222edea
commit 1e3cbe73b1
2 zmienionych plików z 27 dodań i 5 usunięć

Wyświetl plik

@ -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",
}}
>
<div

Wyświetl plik

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Moho 13.0.3 build 635 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Frame_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280px" height="720px">
<g id="crown_3_mod">
<path fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" d="M 173.131 649.426 C 173.178 649.421 264.791 601.537 640.000 601.538 C 932.154 601.539 1106.822 649.421 1106.869 649.426 C 1106.911 649.461 1040.720 698.924 640.000 698.924 C 239.280 698.924 173.178 649.431 173.131 649.426 C 173.128 649.376 138.164 145.577 138.171 145.527 C 138.181 145.547 428.020 374.074 428.027 374.092 C 428.054 374.061 639.975 20.346 640.000 20.314 C 640.004 20.340 851.971 375.726 851.973 375.747 C 852.005 375.729 1141.800 145.550 1141.829 145.527 C 1141.826 145.577 1106.479 649.105 1106.869 649.426 "/>
<path fill="#ffffff" fill-rule="evenodd" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" d="M 138.171 145.527 C 138.181 145.547 428.020 374.074 428.027 374.092 C 428.054 374.061 639.975 20.346 640.000 20.314 C 640.004 20.340 851.971 375.726 851.973 375.747 C 852.005 375.729 1141.800 145.550 1141.829 145.527 C 1141.826 145.577 1106.479 649.105 1106.869 649.426 C 1106.911 649.461 1040.720 698.924 640.000 698.924 C 239.280 698.924 173.178 649.431 173.131 649.426 C 173.128 649.376 138.164 145.577 138.171 145.527 Z"/>
<path fill="#000000" fill-rule="evenodd" stroke="none" d="M 639.589 601.782 C 900.045 602.934 1056.394 637.828 1056.436 637.831 C 1056.472 637.864 996.297 667.941 640.199 666.318 C 283.816 664.693 223.949 634.009 223.907 634.006 C 223.949 634.003 306.268 600.307 639.589 601.782 Z"/>
<path fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" d="M 173.131 649.426 C 173.178 649.421 264.791 601.537 640.000 601.538 C 932.154 601.539 1106.822 649.421 1106.869 649.426 "/>
</g>
</svg>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 2.0 KiB