使用react-native-svg-uri调整静态SVG的大小

时间:2019-06-18 15:53:44

标签: react-native svg react-native-svg

我正在使用react-native-svg-uri依赖的react-native-svg库,并且能够导入静态SVG文件,这就是我使用它的原因,但不幸的是,我无法调整大小SVG。

SVG内部具有width和height属性,当然还有一个viewBox,当我尝试从组件创建中更改其height和width值时,它会缩小其周围的空间,但不会缩小图像。就像CSS中的overflow: hidden

这是我的用法:

<SvgUri style={ styles.buttonImage } source={ImageAssets[button.svg]} />

 buttonImage: {
        alignSelf: 'center',
        justifyContent: 'center',
        height: 50,
    },

例如,如果我尝试将内联宽度= {50}放入SvgUri中,则它看起来像是剪裁的。

关于如何解决此问题的任何想法?我创建的SVG会出现问题吗?

这是我的SVG的一部分

<svg width="104" height="88" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#a" x="2" width="102" height="88"/><path d="M27 41v40s3.886 9.454 10 0M37 65v16M47.999 64.001C40.981 57.169 37 65 37 65M48 64v17s3.986 8.285 10 0M58 56v25M37 77h11M58 75c20 0 24.868 2.373 26-8.999M74 59c-12.871 6.203-8 16-8 16M65 57V38M70 54V41M74 50v-6" fill="none" stroke="#23c295" stroke-linejoin="round"/>... it goes on </svg>

0 个答案:

没有答案