React Native中PayPal SVG图标不显示问题排查求助

问题概述 #

在React Native开发中，将PayPal的SVG代码通过react-svgr转换为React组件后，放入Pressable组件内无法正常显示，需排查操作中的错误。

原始SVG代码 #

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="100.000000pt" height="26.000000pt" viewBox="0 0 100.000000 26.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,26.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M37 253 c-3 -5 -10 -42 -16 -83 -7 -41 -14 -87 -17 -103 -5 -25 -3
-27 24 -27 27 0 31 4 37 40 6 37 9 40 39 40 17 0 43 8 56 17 l25 17 -19 -22
c-11 -12 -26 -22 -35 -23 -11 0 -12 -2 -3 -6 7 -3 23 2 36 10 20 13 23 23 21
64 -2 26 -4 51 -4 54 -3 22 -133 41 -144 22z"/>
<path d="M319 198 c-1 -2 -7 -36 -13 -75 -11 -68 -11 -73 6 -73 11 0 18 7 18
20 0 21 5 24 51 34 32 7 54 49 39 77 -8 14 -21 19 -55 19 -25 0 -45 -1 -46 -2z
m64 -34 c11 -11 -5 -34 -24 -34 -21 0 -22 1 -13 24 6 16 25 21 37 10z"/>
<path d="M711 144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
<path d="M436 131 c-19 -21 -21 -55 -3 -69 6 -5 31 -10 54 -9 39 0 42 2 48 31
4 17 9 38 11 48 7 24 -88 24 -110 -1z m64 -17 c11 -12 10 -18 -3 -32 -16 -15
-18 -15 -34 0 -13 14 -14 20 -3 32 16 20 24 20 40 0z"/>
<path d="M560 145 c0 -2 7 -23 16 -45 15 -38 15 -42 0 -59 -21 -23 -20 -31 2
-31 24 1 119 140 95 140 -9 0 -27 -12 -39 -27 l-22 -28 -7 28 c-5 17 -14 27
-26 27 -10 0 -19 -2 -19 -5z"/>
<path d="M80 90 c0 -5 7 -7 15 -4 8 4 15 8 15 10 0 2 -7 4 -15 4 -8 0 -15 -4
-15 -10z"/>
<path d="M66 33 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
</g>
</svg>

转换后的组件代码（存在问题） #

<Pressable style={s.btn}>
  <Text>Paypal</Text>
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={133.333}
    height={34.667}
    viewBox="0 0 100 26"
  >
    <Path d="M3.7.7c-.3.5-1 4.2-1.6 8.3C1.4 13.1.7 17.7.4 19.3-.1 21.8.1 22 2.8 22c2.7 0 3.1-.4 3.7-4 .6-3.7.9-4 3.9-4 1.7 0 4.3-.8 5.6-1.7l2.5-1.7-1.9 2.2C15.5 14 14 15 13.1 15.1c-1.1 0-1.2.2-.3.6.7.3 2.3-.2 3.6-1 2-1.3 2.3-2.3 2.1-6.4-.2-2.6-.4-5.1-.4-5.4C17.8.7 4.8-1.2 3.7.7zM31.9 6.2c-.1.2-.7 3.6-1.3 7.5-1.1 6.8-1.1 7.3.6 7.3 1.1 0 1.8-.7 1.8-2 0-2.1.5-2.4 5.1-3.4 3.2-.7 5.4-4.9 3.9-7.7-.8-1.4-2.1-1.9-5.5-1.9-2.5 0-4.5.1-4.6.2zm6.4 3.4c1.1 1.1-.5 3.4-2.4 3.4-2.1 0-2.2-.1-1.3-2.4.6-1.6 2.5-2.1 3.7-1zM71.1 11.6c0 1.1.3 1.4.6.6.3-.7.2-1.6-.1-1.9-.3-.4-.6.2-.5 1.3zM43.6 12.9c-1.9 2.1-2.1 5.5-.3 6.9.6.5 3.1 1 5.4.9 3.9 0 4.2-.2 4.8-3.1.4-1.7.9-3.8 1.1-4.8.7-2.4-8.8-2.4-11 .1zm6.4 1.7c1.1 1.2 1 1.8-.3 3.2-1.6 1.5-1.8 1.5-3.4 0-1.3-1.4-1.4-2-.3-3.2 1.6-2 2.4-2 4 0zM56 11.5c0 .2.7 2.3 1.6 4.5 1.5 3.8 1.5 4.2 0 5.9-2.1 2.3-2 3.1.2 3.1 2.4-.1 11.9-14 9.5-14-.9 0-2.7 1.2-3.9 2.7l-22 -28 -7 28 c-5 17 -14 27-26 27 -10 0 -19 -2 -19 -5z" />
    <Path d="M8 17c0 .5.7.7 1.5.4.8-.4 1.5-.8 1.5-1 0-.2-.7-.4-1.5-.4S8 16.4 8 17zM6.6 22.7c-.6 1.4-.5 1.5.5.6.7-.7 1-1.5.7-1.8-.3-.3-.9.2-1.2 1.2z" />
  </Svg>
</Pressable>

错误分析 #

1. 路径转换错误：原始SVG的<g>标签带有transform="translate(0.000000,26.000000) scale(0.100000,-0.100000)"，这个变换会平移、翻转并缩放坐标系统。react-svgr转换时错误修改了Path的d属性，导致图形坐标偏移，超出可视区域。
2. 缺少填充颜色：原始SVG的<g>设置了fill="#000000"，但转换后的<Svg>和<Path>未继承该属性，React Native SVG组件默认填充为透明，导致图形不可见。
3. 尺寸不匹配：转换后的SVG设置了width={133.333}和height={34.667}，与Pressable的style限制冲突，导致SVG被挤压或隐藏。

解决方案 #

修正后的组件代码 #

import { Pressable, Text } from 'react-native';
import Svg, { G, Path } from 'react-native-svg';

// ...

<Pressable style={s.btn}>
  <Text>Paypal</Text>
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={100}
    height={26}
    viewBox="0 0 100 26"
    preserveAspectRatio="xMidYMid meet"
  >
    <G
      transform="translate(0.000000,26.000000) scale(0.100000,-0.100000)"
      fill="#000000"
      stroke="none"
    >
      <Path d="M37 253 c-3 -5 -10 -42 -16 -83 -7 -41 -14 -87 -17 -103 -5 -25 -3 -27 24 -27 27 0 31 4 37 40 6 37 9 40 39 40 17 0 43 8 56 17 l25 17 -19 -22 c-11 -12 -26 -22 -35 -23 -11 0 -12 -2 -3 -6 7 -3 23 2 36 10 20 13 23 23 21 64 -2 26 -4 51 -4 54 -3 22 -133 41 -144 22z"/>
      <Path d="M319 198 c-1 -2 -7 -36 -13 -75 -11 -68 -11 -73 6 -73 11 0 18 7 18 20 0 21 5 24 51 34 32 7 54 49 39 77 -8 14 -21 19 -55 19 -25 0 -45 -1 -46 -2z m64 -34 c11 -11 -5 -34 -24 -34 -21 0 -22 1 -13 24 6 16 25 21 37 10z"/>
      <Path d="M711 144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
      <Path d="M436 131 c-19 -21 -21 -55 -3 -69 6 -5 31 -10 54 -9 39 0 42 2 48 31 4 17 9 38 11 48 7 24 -88 24 -110 -1z m64 -17 c11 -12 10 -18 -3 -32 -16 -15 -18 -15 -34 0 -13 14 -14 20 -3 32 16 20 24 20 40 0z"/>
      <Path d="M560 145 c0 -2 7 -23 16 -45 15 -38 15 -42 0 -59 -21 -23 -20 -31 2 -31 24 1 119 140 95 140 -9 0 -27 -12 -39 -27 l-22 -28 -7 28 c-5 17 -14 27 -26 27 -10 0 -19 -2 -19 -5z"/>
      <Path d="M80 90 c0 -5 7 -7 15 -4 8 4 15 8 15 10 0 2 -7 4 -15 4 -8 0 -15 -4 -15 -10z"/>
      <Path d="M66 33 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
    </G>
  </Svg>
</Pressable>

关键修复点 #

• 保留原始的<G>标签及transform属性，避免路径坐标被错误转换。
• 继承原始的fill="#000000"和stroke="none"属性，确保图形有填充颜色。
• 修正SVG的width和height与原始SVG一致（100和26），避免尺寸冲突。
• 保留preserveAspectRatio属性，保证图形比例正确。

内容的提问来源于stack exchange，提问作者localdata01