Question

使用Inkscape我从png创建了一个svg文件，然后我尝试在react-native-svg中使用它的路径＆＃d;（由Inkscape生成），但是我失败了。这是我的代码，但它只呈现给定填充颜色的rectanagle：

import React from 'react';
import styled from 'styled-components/native';
import { withTheme } from 'styled-components';
import Svg, { Path } from 'react-native-svg';

const StyledPart = styled.View`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
`;

const StyledWaveBackground = styled.View`
  width: 100%;
  height: 100%;
  position: relative;
`;

const Part = ({ width, height, fill, d }) => (
  <StyledPart>
    <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <Path d={d} fill={fill} />
    </Svg>
  </StyledPart>
);

const WaveBackground = ({ width, height, theme }) => (
  <StyledWaveBackground>
    <Part
      width={width}
      height={height}
      fill={theme.color.primary}
      d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z"
    />
    <Part
      width={width}
      height={height}
      fill={theme.color.primary}
      d="M 120,254.17154 C 81.92867,250.44385 47.75997,241.17995 15.9375,225.95786 L 0,218.33426 0,109.16713 0,0 256.875,0 513.75,0 l 0,106.73949 0,106.73949 -2.82013,0.70781 c -1.55107,0.38928 -11.53545,1.66099 -22.1875,2.82599 -28.98642,3.17021 -64.58588,2.85335 -96.24237,-0.85663 -21.29589,-2.49576 -31.64353,-3.00549 -61.25,-3.01714 -32.18921,-0.0126 -36.98349,0.26131 -49.71091,2.84071 -14.16663,2.87109 -33.00602,9.07774 -66.53909,21.92134 -23.25836,8.90826 -36.6669,12.75144 -52.89669,15.16133 -11.77822,1.7489 -30.52554,2.24276 -42.10331,1.10915 z"
    />
  </StyledWaveBackground>
);

export default withTheme(WaveBackground);

这就是它渲染的结果（只是彩色的recatngle） current render result

但它应该是这样的（挥手背景） correct render result

PS：我在真实设备上测试（不是模拟器）魅族M3E，如果重要的话

Answer 1

最重要的部分 - 您使用的宽度和高度值以及生成的viewBox - 都缺失了。这看起来不错：

＆＃13;

<svg width="200" height="100" viewBox="0 0 600 300">
      <path fill="green"
      d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z"
    />
</svg>

＆＃13;

react-native-svg中的路径呈现不正确

1 个答案: