react-native-svg中的LinearGradient不起作用答案

【问题标题】：LinearGradient in react-native-svg not workingreact-native-svg中的LinearGradient不起作用
【发布时间】：2022-05-01 21:39:25
【问题描述】：

我正在尝试在我的 react native 项目中使用 SVG。这是我的组件的代码：

<Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}>

  <Defs>

     <ClipPath id="a">
        <Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
    </ClipPath>

    <LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox">
        <Stop offset="0" stopColor="rgb(76,209,149)"  />
        <Stop offset="1" stopColor="rgb(170,221,100)"  />
    </LinearGradient>

  </Defs>

    <G class="b" transform="translate(0 -160)">
        <Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)"  fill='url(#b)' />
    </G>

</Svg>

我得到的输出是：

https://i.stack.imgur.com/mGaBg.png

【问题讨论】：

不要在线性渐变上使用clip-path。在g class="b" 或circle 上使用它另外，我不熟悉react native svg，但你有一个带有d 属性的rect 元素。在 SVG 中，这是一个 path 元素而不是 rect

标签： react-native svg react-native-svg

【解决方案1】：

我认为@enxaneta 是对的，clip-path 似乎在 react-native-svg 上不存在，请参阅文档，您可以在此处的文档中找到 react-native-svg #LinearGradient

我认为你应该这样引用它：

        <Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>

fill 应引用您的渐变 ID，即 fill=url(#b)

我使用<Path> 实现了以下结果

注意：我通过使用两个相互叠加的形状来实现这一点：

使用react-native-linear-gradient的具有背景渐变的组件
还有来自react-native-linear-gradient 的LinearGradient

请参考以下代码。

以上示例代码

import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
import Gradient from 'react-native-linear-gradient'
const { width, height } = Dimensions.get('window')

      <Gradient style={{height: height * .25,}} 
        colors={ ['#FFD080', 'red'] }
        start={{ x: 0, y: 0}}
        end={{ x:1, y: 1}}
        locations={[0.18, 1, 1]}>
          
            
        <Svg
            height={height * .44}
            width={width}
            viewBox="0 0 1440 320"
            style={{ position: 'relative', top: height * .069 }}
          >
          <Defs>
          <LinearGradient id="path" x1="0" y1="0" x2="1" y2="1">
              <Stop offset="0" stopColor="#FFD080" stopOpacity="1" />
              <Stop offset="1" stopColor="red" stopOpacity="1" />
            </LinearGradient>
          </Defs>
            <Path fill="url(#path)"
               d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/>
        </Svg>
        </Gradient>

【讨论】：

【解决方案2】：

我找到了一个解决方案，我没有使用具有渐变的 svg，而是将 SVG 转换为 Lottie 文件。效果很好，作为一个额外的优势，我们可以将 SVG 转换为一个简单的动画 :)

【讨论】：