如何在 React Native 中显示渐变 SVG 图像

debugcn 发表于 Dev

阮东

我尝试使用 lib react-native-svg-uri 来显示我的渐变 SVG，但它的背景在屏幕上是黑色的，如附图所示。当我按照此链接中的指南进行操作时，下面的代码有任何问题：https : //www.npmjs.com/package/react-native-svg

const iconSvg = require('../images/home_option2/bao_cao.svg')    
<SvgUri height={96} width={96} source={iconSvg}/>

这是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
    <defs>
        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#68B9FE"/>
            <stop offset="100%" stop-color="#627CFF"/>
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <rect width="48" height="48" fill="url(#a)" rx="24"/>
        <path fill="#FFF" d="M17.02 14.692v17.03c0 .406-.334.74-.741.74a.743.743 0 0 1-.74-.74V16.384h-.847A1.69 1.69 0 0 0 13 18.077v15.23A1.69 1.69 0 0 0 14.692 35h18.674c.899 0 1.634-.73 1.634-1.634V14.692A1.69 1.69 0 0 0 33.308 13l-14.702.106c-.936 0-1.587.65-1.587 1.586zm3.49 1.693h4.442c.407 0 .74.333.74.74s-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm0 8.461h7.827c.407 0 .74.333.74.74 0 .408-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm10.365 5.712H20.51a.743.743 0 0 1-.74-.74c0-.408.332-.741.74-.741h10.365c.407 0 .74.333.74.74 0 .408-.333.74-.74.74zm0-8.462H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74h10.365c.407 0 .74.333.74.74s-.333.74-.74.74z"/>
    </g>
</svg>

任何人都可以帮助，请！

蒂姆

问题在于您的 .svg 文件。您可能正在使用较旧的 svg 标准。我转换了你的 .svg 文件，新的文件就可以工作了。

新的SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M48,24c0,-13.246 -10.754,-24 -24,-24c-13.246,0 -24,10.754 -24,24c0,13.246 10.754,24 24,24c13.246,0 24,-10.754 24,-24Z" style="fill:url(#_Linear1);"/><path d="M17.02,14.692l0,17.03c0,0.406 -0.334,0.74 -0.741,0.74c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74l0,-15.338l-0.847,0c-0.001,0 -0.001,0 -0.002,0c-0.927,0 -1.69,0.763 -1.69,1.69c0,0.001 0,0.002 0,0.003l0,15.23c0,0.001 0,0.002 0,0.003c0,0.927 0.763,1.69 1.69,1.69c0.001,0 0.001,0 0.002,0l18.674,0c0.899,0 1.634,-0.73 1.634,-1.634l0,-18.674c0,-0.001 0,-0.001 0,-0.002c0,-0.927 -0.763,-1.69 -1.69,-1.69c-0.001,0 -0.001,0 -0.002,0l-14.702,0.106c-0.936,0 -1.587,0.65 -1.587,1.586l0.001,0Zm3.49,1.693l4.442,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74l-4.442,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm0,8.461l7.827,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l-7.827,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm10.365,5.712l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.408 0.332,-0.741 0.74,-0.741l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l0,0.001Zm0,-8.462l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74Z" style="fill:#fff;"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.93915e-15,48,-48,2.93915e-15,24,0)"><stop offset="0" style="stop-color:#68b9fe;stop-opacity:1"/><stop offset="1" style="stop-color:#627cff;stop-opacity:1"/></linearGradient></defs></svg>

演示：

import SvgUri from 'react-native-svg-uri';
import img from './test2.svg'; // import .svg file 


<SvgUri
  width="200"
  height="200"
  source={img}
/>

结果：