Add support for shadows, bg color.
rodzic
5df222edea
commit
1e3cbe73b1
|
@ -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
|
||||
|
|
|
@ -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 |
Ładowanie…
Reference in New Issue