react-native - 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,0,0,0,70.49,34.65Z"/><path class="cls-2" d="M83.81,256.21a74,74,0,0,1-11.94-.95A85.58,85.58,0,0,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,0,67.46A78.47,78.47,0,0,0,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,0,0,1,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,1,.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,0,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 正确呈现。
更新:添加停止、移动宽度和高度以包裹视图并调整视口使 svg 渲染。但是第二条和第三条路径上的渐变搞砸了
const Icon = memo(
({ color, size = 60, style, ...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>
)
}
)
解决方案
推荐阅读
- twitter-bootstrap - 为什么 reactstrap 没有像 bootstrap 一样的行为?
- scala - Scala - 按键减少元组列表
- r - 后期进入生存分析的语法
- python - 使用 Tensorflow tf.data 在图形执行期间从时间序列特征创建图像
- python - 无法解释发生 SettingWithCopyError 的原因(Python 2.7,Pandas 0.20.3)
- c - 修复 C switch 语句函数溢出?
- r - R data.table 生成每列的唯一值
- django - Django - get_redirect_url() 导致找不到页面 (404)
- macos - 如何从目录和子目录中的txt文件中找到许多文件,然后将所有文件复制到新文件夹
- swift - Firebase ChildAdded 观察者正在检索不存在的数据