我认为@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
请参考以下代码。
上面例子的代码
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>
我找到了一个解决方案,我不使用具有渐变的 svgs,而是将 SVG 转换为 Lottie 文件。效果很好,作为额外的优势,我们可以将 SVG 转换为简单的动画:)
效果很好:
import React from "react";
import { View, Text } from "react-native";
import { Polygon, Svg, LinearGradient, Stop, Defs, G, Use,} from "react-native-svg";
const Triangle = () => {
return (
<Svg viewBox="0 0 386 386">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
<Stop offset="0" stopColor="#000" stopOpacity="0.2" />
<Stop offset="1" stopColor="#71D4EB" stopOpacity="0.1" />
</LinearGradient>
<G id="polygon">
<Polygon
points={"193,193 0,386 0,0"}
fill="url(#grad)"
strokeWidth={0}
/>
</G>
</Defs>
<Use href="#polygon" x="0" y="0" />
<Use href="#polygon" x="0" y="0" rotation="180" origin="193, 193" />
<Use href="#polygon" x="0" y="0" rotation="90" origin="193, 193" />
<Use href="#polygon" x="0" y="0" rotation="270" origin="193, 193" />
</Svg>
);
};
export default Triangle;