Diese Komponente zeigt ein Vektorgrafikbild (SVG-Format) an. Props steuern die Füllfarbe, die Strichfarbe und die Strichstärke.
Die Pfade werden im Standard-SVG-String-Format angegeben. Pfade müssen in einer verschachtelten SvgPath-Komponenteninstanz angegeben werden. Es können mehrere SvgPath-Kinder angegeben werden, jeweils mit unterschiedlichen Strich- und Füllparametern. SvgRect-Kinder werden derzeit ebenfalls unterstützt, mit den begrenzten Props, die in react-native-svg verfügbar sind.
Zur Installation: npm install reactxp-imagesvg oder yarn add reactxp-imagesvg
// See below for supported styles
style: RX.ImageSvgStyleRuleSet | RX.ImageSvgStyleRuleSet[] = [];
// Color and opacity of fill; default values are provided by SVG
fillColor: color;
fillOpacity: number;
// Preserve aspect ratio or stretch?
preserveAspectRatio: boolean = true;
// Color, width and opacity of stroke; default values are provided by SVG
strokeColor: color;
strokeWidth: number;
strokeOpacity: number;
// Tooltip for image
title: string = undefined;
// Bounding box
viewBox: string = undefined;
// Shadow
webShadow: boolean = false; // web-specific
Diese Props gelten für alle nachfolgenden Sub-SVG-Elementtypen
// Color and opacity of fill; default values are provided by SVG
fillColor: color;
fillOpacity: number;
// Color, width and opacity of stroke; default values are provided by SVG
strokeColor: color;
strokeWidth: number;
strokeOpacity: number;
// Path definition string
d: string = undefined;
// Position and dimension information for the rect
x: number;
y: number;
width: number;
height: number;
Keine Methoden
import { default as RXImageSvg, SvgPath as RXSvgPath, Types as SvgTypes }
from 'reactxp-imagesvg';
return (
<RXImageSvg height={ 20 } width={ 20 }>
<RXSvgPath
fillColor={ 'orange' }
d={ 'M 0 0 h 20 v 20 z' }
/>
<RXSvgRect
fillColor={ 'blue' }
x={ 10 }
y={ 20 }
width={ 30 }
height={ 40 }
/>
</RXImageSvg>
);