我正在使用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>