SVG 图片

此组件显示矢量图像（SVG 格式）。属性控制填充颜色、描边颜色和描边宽度。

路径使用标准 SVG 字符串格式指定。路径必须在嵌套的 SvgPath 组件实例中指定。可以指定多个 SvgPath 子组件，每个子组件具有不同的描边和填充参数。目前也支持 SvgRect 子组件，其属性受限于 react-native-svg 中可用的属性。

安装：npm install reactxp-imagesvg 或 yarn add reactxp-imagesvg

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

SvgCommon 属性

这些属性适用于下面的所有子 SVG 元素类型

// 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;

SvgPath 属性

// Path definition string
d: string = undefined;

SvgRect 属性

// Position and dimension information for the rect
x: number;
y: number;
width: number;
height: number;

样式

Flexbox 样式

视图样式

变换样式

方法

无方法

示例用法

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>
);