react-native-svg 无法正确转换

我无法通过 react-native-svg 转换此 svg 以用于本机反应

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 342.7 256.21"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="7.39" y1="65.57" x2="78.68" y2="65.57" gradientUnits="userSpaceonUse"><stop offset="0" stop-color="#244b9d"/><stop offset="0.99" stop-color="#e27b2d"/></linearGradient><linearGradient id="linear-gradient-2" x1="0" y1="163.98" x2="148.18" y2="163.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="68.45" y1="120.84" x2="342.7" y2="120.84" xlink:href="#linear-gradient"/></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M7.39,104l.24-7.2C7.68,95.34,9,60.88,23.45,47,37.52,33.5,49.94,28.73,74.57,27.36l4.11-.23-.44,4.1c0,.46-1.29,11.51-7.59,19.84s-41.57,37-57.45,48.67Zm63.1-69.35c-20,1.57-30.25,5.93-42.2,17.39C19.58,60.4,16.37,79,15.23,89.47,34.31,74.93,60.42,53,65.07,46.85A34.39,34.39,70.49,34.65Z"/><path class="cls-2" d="M83.81,256.21a74,74,1-11.94-.95A85.58,85.58,1,7.93,206.49c-10.57-23.69-10.57-48.27,0-73.06,11.49-27,57.07-56.33,59-57.57l6.45-4.12-1.11,7.58c-3.64,24.85-12.69,92-10.91,104.24C63.4,197.74,68.12,205,82.4,216c11.24,8.65,45.05,12.32,57.13,13l8.65.49-6.57,5.65C132.39,243.1,109.85,256.21,83.81,256.21ZM64.2,86.15c-13,9.1-41.66,30.77-49.85,50-9.9,23.25-9.9,45.32,67.46A78.47,78.47,73,248.35c23.13,3.75,44.65-5.67,56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37C52.5,171.43,61,108.57,64.2,86.15Z"/><path class="cls-3" d="M202.06,241.69c-20.22,0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58,10.3,3.11c.65.19,14.21,4,24.07-6.5,7.92-8.44,9.62-28.47,11.12-46.14.53-6.22,1-12.1,1.77-17.62,1.69-12.67,9.12-27.23,19.88-38.95a84,84,47.55-26.36L187.9,57l-.69,4.79c-.09.59-8.62,59.63-11.93,89.82-1.51,13.78,4.51,20.71,9.83,24.1,8.17,5.21,19,4.91,24.44,1.64,11.43-6.93,13.06-13.67,14.39-24,1.39-10.8,12.29-91.66,14.95-108.34,3-18.63,21.2-37.82,40.66-42.78,26.83-6.84,48.72,2,58.54,23.59L342.7,36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7,2.22-12.47,9-13.7,14.26-1.4,5.92-13.36,90.21-17.48,125.74-3.69,31.89-20.32,53.88-52.35,69.2C223.35,239.64,212.92,241.69,202.06,241.69Zm-55.93-27.21,.85c23.23,19.1,58.53,25,82.11,13.73,30.05-14.38,45-34,48.42-63.7,3.93-33.91,16-119.53,17.61-126.54S304,22.59,313.69,19.5c4-1.29,8.6-.74,12.59.37C312.86,3.4,291,6.58,281.28,9.05c-18.44,4.7-33.24,23-35.48,37.1-2.65,16.63-13.52,97.35-14.92,108.13-1.45,11.26-3.67,20.54-17.7,29.05-8.52,5.16-22.2,4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77,2.76-25.16,9.12-70.21,11.25-85.12-34.61,8.37-54.37,39.16-56.92,58.35-.72,5.35-1.21,11.15-1.73,17.28-1.68,19.73-3.41,40.13-13,50.34a29.86,29.86,1-20.65,9.47c19.83,14.59,57.1,13.38,57.53,13.37Z"/></g></g></svg>

我的输出是

import React,{ memo } from 'react'
import Svg,{ Defs,LinearGradient,Stop,G,Path } from 'react-native-svg' //12.1.1

const Icon = memo(
  ({ color,size = 120,style,...rest }: IconProps) => {
    return (
      <Svg viewBox="0 0 120 120" width={size} height={size} {...rest}>
        <Defs>
          <LinearGradient
            id="linear-gradient"
            x1={7.39}
            y1={65.57}
            x2={78.68}
            y2={65.57}
            gradientUnits="userSpaceonUse"
          >
            <Stop offset={0} stopColor="#244b9d" />
            <Stop offset={0.99} stopColor="#e27b2d" />
          </LinearGradient>
          <LinearGradient
            id="linear-gradient-2"
            x1={0}
            y1={163.98}
            x2={148.18}
            y2={163.98}
          />
          <LinearGradient
            id="linear-gradient-3"
            x1={68.45}
            y1={120.84}
            x2={342.7}
            y2={120.84}
          />
        </Defs>
        <G id="Layer_2" data-name="Layer 2">
          <G id="Layer_2-2" data-name="Layer 2">
            <Path
              d="M7.39 104l.24-7.2C7.68 95.34 9 60.88 23.45 47c14.07-13.5 26.49-18.27 51.12-19.64l4.11-.23-.44 4.1c0 .46-1.29 11.51-7.59 19.84s-41.57 37-57.45 48.67zm63.1-69.35c-20 1.57-30.25 5.93-42.2 17.39C19.58 60.4 16.37 79 15.23 89.47 34.31 74.93 60.42 53 65.07 46.85a34.39 34.39 0 005.42-12.2z"
              fill="url(#linear-gradient)"
            />
            <Path
              d="M83.81 256.21a74 74 0 01-11.94-.95 85.58 85.58 0 01-63.94-48.77c-10.57-23.69-10.57-48.27 0-73.06 11.49-27 57.07-56.33 59-57.57l6.45-4.12-1.11 7.58c-3.64 24.85-12.69 92-10.91 104.24C63.4 197.74 68.12 205 82.4 216c11.24 8.65 45.05 12.32 57.13 13l8.65.49-6.57 5.65c-9.22 7.96-31.76 21.07-57.8 21.07zM64.2 86.15c-13 9.1-41.66 30.77-49.85 50-9.9 23.25-9.9 45.32 0 67.46A78.47 78.47 0 0073 248.35c23.13 3.75 44.65-5.67 56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37-1.92-13.12 6.58-75.98 9.78-98.4z"
              fill="url(#linear-gradient-2)"
            />
            <Path
              d="M202.06 241.69c-20.22 0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58 10.3 3.11c.65.19 14.21 4 24.07-6.5 7.92-8.44 9.62-28.47 11.12-46.14.53-6.22 1-12.1 1.77-17.62 1.69-12.67 9.12-27.23 19.88-38.95a84 84 0 0147.55-26.36l4.76-.83-.69 4.79c-.09.59-8.62 59.63-11.93 89.82-1.51 13.78 4.51 20.71 9.83 24.1 8.17 5.21 19 4.91 24.44 1.64 11.43-6.93 13.06-13.67 14.39-24 1.39-10.8 12.29-91.66 14.95-108.34 3-18.63 21.2-37.82 40.66-42.78 26.83-6.84 48.72 2 58.54 23.59L342.7 36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7 2.22-12.47 9-13.7 14.26-1.4 5.92-13.36 90.21-17.48 125.74-3.69 31.89-20.32 53.88-52.35 69.2-8.93 4.28-19.36 6.33-30.22 6.33zm-55.93-27.21l1 .85c23.23 19.1 58.53 25 82.11 13.73 30.05-14.38 45-34 48.42-63.7 3.93-33.91 16-119.53 17.61-126.54S304 22.59 313.69 19.5c4-1.29 8.6-.74 12.59.37C312.86 3.4 291 6.58 281.28 9.05c-18.44 4.7-33.24 23-35.48 37.1-2.65 16.63-13.52 97.35-14.92 108.13-1.45 11.26-3.67 20.54-17.7 29.05-8.52 5.16-22.2 4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77 2.76-25.16 9.12-70.21 11.25-85.12-34.61 8.37-54.37 39.16-56.92 58.35-.72 5.35-1.21 11.15-1.73 17.28-1.68 19.73-3.41 40.13-13 50.34a29.86 29.86 0 01-20.65 9.47c19.83 14.59 57.1 13.38 57.53 13.37z"
              fill="url(#linear-gradient-3)"
            />
          </G>
        </G>
      </Svg>
    )
  }
)

无论我做什么,它似乎都只呈现第一个 Path,其余的都不见了。它似乎也没有被 viewBox 切断。不知道该怎么做才能让这个 svg 正确呈现。

react-native-svg 无法正确转换

它如何在网络上呈现

react-native-svg 无法正确转换

添加停靠点让我走得更远,但仍然无法正常工作

react-native-svg 无法正确转换

更新:添加停止、移动宽度和高度以环绕视图并调整视口使 svg 呈现。但是梯度在第二条和第三条路径上搞砸了

const Icon = memo(
  ({ color,size = 60,...rest }: IconProps) => {
    return (
      <View style={{ width: size,height: size }}>
        <Svg viewBox="0 0 360 360" {...rest}>
          <Defs>
            <LinearGradient
              id="linear-gradient"
              x1={7.39}
              y1={65.57}
              x2={78.68}
              y2={65.57}
              gradientUnits="userSpaceonUse"
            >
              <Stop offset={0} stopColor="#244b9d" />
              <Stop offset={0.99} stopColor="#e27b2d" />
            </LinearGradient>
            <LinearGradient
              id="linear-gradient-2"
              x1={0}
              y1={163.98}
              x2={148.18}
              y2={163.98}
            >
              <Stop offset={0} stopColor="#244b9d" />
              <Stop offset={0.99} stopColor="#e27b2d" />
            </LinearGradient>
            <LinearGradient
              id="linear-gradient-3"
              x1={68.45}
              y1={120.84}
              x2={342.7}
              y2={120.84}
            >
              <Stop offset={0} stopColor="#244b9d" />
              <Stop offset={0.99} stopColor="#e27b2d" />
            </LinearGradient>
          </Defs>
          <G id="Layer_2" data-name="Layer 2">
            <G id="Layer_2-2" data-name="Layer 2">
              <Path
                d="M7.39 104l.24-7.2C7.68 95.34 9 60.88 23.45 47c14.07-13.5 26.49-18.27 51.12-19.64l4.11-.23-.44 4.1c0 .46-1.29 11.51-7.59 19.84s-41.57 37-57.45 48.67zm63.1-69.35c-20 1.57-30.25 5.93-42.2 17.39C19.58 60.4 16.37 79 15.23 89.47 34.31 74.93 60.42 53 65.07 46.85a34.39 34.39 0 005.42-12.2z"
                fill="url(#linear-gradient)"
              />
              <Path
                d="M83.81 256.21a74 74 0 01-11.94-.95 85.58 85.58 0 01-63.94-48.77c-10.57-23.69-10.57-48.27 0-73.06 11.49-27 57.07-56.33 59-57.57l6.45-4.12-1.11 7.58c-3.64 24.85-12.69 92-10.91 104.24C63.4 197.74 68.12 205 82.4 216c11.24 8.65 45.05 12.32 57.13 13l8.65.49-6.57 5.65c-9.22 7.96-31.76 21.07-57.8 21.07zM64.2 86.15c-13 9.1-41.66 30.77-49.85 50-9.9 23.25-9.9 45.32 0 67.46A78.47 78.47 0 0073 248.35c23.13 3.75 44.65-5.67 56.6-13.15-14.22-1.43-40.39-5.14-51.46-13.65-15.63-12-21.4-21-23.72-37-1.92-13.12 6.58-75.98 9.78-98.4z"
                fill="url(#linear-gradient-2)"
              />
              <Path
                d="M202.06 241.69c-20.22 0-41.94-7.08-58.33-20.13-8.35.14-51.79-.28-68.77-22.69l-6.51-8.58 10.3 3.11c.65.19 14.21 4 24.07-6.5 7.92-8.44 9.62-28.47 11.12-46.14.53-6.22 1-12.1 1.77-17.62 1.69-12.67 9.12-27.23 19.88-38.95a84 84 0 0147.55-26.36l4.76-.83-.69 4.79c-.09.59-8.62 59.63-11.93 89.82-1.51 13.78 4.51 20.71 9.83 24.1 8.17 5.21 19 4.91 24.44 1.64 11.43-6.93 13.06-13.67 14.39-24 1.39-10.8 12.29-91.66 14.95-108.34 3-18.63 21.2-37.82 40.66-42.78 26.83-6.84 48.72 2 58.54 23.59L342.7 36l-9.59-5.69c-2.95-1.75-11.83-5.9-17.3-4.15-7 2.22-12.47 9-13.7 14.26-1.4 5.92-13.36 90.21-17.48 125.74-3.69 31.89-20.32 53.88-52.35 69.2-8.93 4.28-19.36 6.33-30.22 6.33zm-55.93-27.21l1 .85c23.23 19.1 58.53 25 82.11 13.73 30.05-14.38 45-34 48.42-63.7 3.93-33.91 16-119.53 17.61-126.54S304 22.59 313.69 19.5c4-1.29 8.6-.74 12.59.37C312.86 3.4 291 6.58 281.28 9.05c-18.44 4.7-33.24 23-35.48 37.1-2.65 16.63-13.52 97.35-14.92 108.13-1.45 11.26-3.67 20.54-17.7 29.05-8.52 5.16-22.2 4.42-31.83-1.72-9.89-6.31-14.51-17.23-13-30.77 2.76-25.16 9.12-70.21 11.25-85.12-34.61 8.37-54.37 39.16-56.92 58.35-.72 5.35-1.21 11.15-1.73 17.28-1.68 19.73-3.41 40.13-13 50.34a29.86 29.86 0 01-20.65 9.47c19.83 14.59 57.1 13.38 57.53 13.37z"
                fill="url(#linear-gradient-3)"
              />
            </G>
          </G>
        </Svg>
      </View>
    )
  }
)

结果

react-native-svg 无法正确转换

zuo123456789roc 回答:react-native-svg 无法正确转换

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/12502.html

大家都在问