如何利用React自然线性梯度法求取合适的梯度

h6my8fg2 于 2022-12-14 发布在 React

关注(0)|答案(1)|浏览(116)

<svg width="287" height="51" viewBox="0 0 287 51" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="287" height="51" rx="8" fill="url(#paint0_linear_317_287)"/>
    <defs>
    <linearGradient id="paint0_linear_317_287" x1="642.63" y1="-71.5962" x2="3.27769" y2="38.4169" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FF4B00"/>
        <stop offset="1" stop-color="#D057BD"/>
    </linearGradient>
    </defs>
</svg>

我在svg中有这个linearGradient，并且想用react-native-linear-gradient实现相同的效果，但是无法实现？我想使用react-native-linear-gradient，因为我没有灵活性来根据svg的需求来设计样式，或者至少我不知道如何设计。
希望使用react-native-linear-gradient实现相同的svg linearGradientin

react-native

来源：https://stackoverflow.com/questions/74678687/how-to-get-proper-gradient-with-react-native-linear-gradient

1条答案

按热度按时间

f3temu5u1#

我认为你不能用react-native-linear-gradient来实现它，但是你可以用https://github.com/software-mansion/react-native-svg来实现它。例如，你的组件可以是：

const SvgComponent = (props) => (
  <svg
    width={287}
    height={51}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <rect width={287} height={51} rx={8} fill="url(#a)" />
    <defs>
      <linearGradient
        id="a"
        x1={642.63}
        y1={-71.596}
        x2={3.278}
        y2={38.417}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#FF4B00" />
        <stop offset={1} stopColor="#D057BD" />
      </linearGradient>
    </defs>
  </svg>
)

export default SvgComponent

你可以用这个网站建立同样的https://react-svgr.com/playground/

赞(0）回复(0）举报 2022-12-14

我来回答

如何利用React自然线性梯度法求取合适的梯度

1条答案

相关问题

热门标签

最新问答