我下载了expo-svg-uri module https://github.com/thongdn-it/expo-svg-uri使用 Svg 图像。
但图像显示不正确。
我失败的代码:
<View style={styles.container}>
<SvgUri
width="200"
height="200"
source={require("../../image/minigroup.svg")}
/>
</View>
失败的图像
原始图像
这是我的 svg 文件
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="183" viewBox="0 0 80 183">
<defs>
<circle id="b" cx="35" cy="35" r="35"/>
<filter id="a" width="142.9%" height="142.9%" x="-21.4%" y="-21.4%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
</filter>
<circle id="d" cx="35" cy="34" r="24"/>
<filter id="c" width="168.8%" height="168.8%" x="-28.1%" y="-28.1%" filterUnits="objectBoundingBox">
<feOffset dx="3" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
</filter>
<circle id="f" cx="35" cy="34" r="12"/>
<filter id="e" width="208.3%" height="208.3%" x="-45.8%" y="-45.8%" filterUnits="objectBoundingBox">
<feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<text fill="#646464" font-family="Bungee-Regular, Bungee" font-size="20" letter-spacing="-.375">
<tspan x="6.107" y="163">Point</tspan>
</text>
<text fill="#3D3D3D" font-family="Bungee-Regular, Bungee" font-size="20" letter-spacing="-.375">
<tspan x="20.282" y="140">Tap</tspan>
</text>
<g transform="translate(5 5)">
<rect width="70" height="81" y="28" fill="#FFD90D" rx="12"/>
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
<use fill="#FFD90D" xlink:href="#b"/>
<use fill="#000" filter="url(#c)" xlink:href="#d"/>
<use fill="#FFD90D" xlink:href="#d"/>
<g>
<use fill="#000" filter="url(#e)" xlink:href="#f"/>
<use fill="#FFD90D" xlink:href="#f"/>
</g>
</g>
</g>
</svg>
我没有路径值,我只是将其全部绘制出来。你说这可能吗?
请多多帮助我们。先感谢您。
First
- 将您的 svg 文件拖到此在线工具中SVGOMG https://jakearchibald.github.io/svgomg/
- 切换到标记选项卡。
- Copy
d
的属性path
xml 标签。
Second
- 直接使用渲染 svg 文件反应本机 svg https://www.npmjs.com/package/react-native-svg
如果您使用的是 expo,react-native-svg 已经安装并链接
呈现主页图标的示例:
<Svg
width="20"
height="20"
viewBox="0 0 512 512" // Has to be the same of the original svg file
>
<Path
d="M208 448V320h96v128h97.6V256H464L256 64 48 256h62.4v192z"
fill="red"
/>
</Svg>
这还可以节省您加载和读取文件的成本......
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)