zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 05:55:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

add Gradients

Browse Source
This commit is contained in:
Horcrux
2016-04-20 19:02:26 +08:00
parent 677bbbe408
commit 870c0c37e7
10 changed files with 660 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
Example/examples/Gradients.js
View File

@@ -82,6 +82,11 @@ class RadialGradientExample extends Component{
stopColor="#ff0"
stopOpacity="1"
/>
<Stop
offset="0.3"
stopColor="#000"
stopOpacity="1"
/>
<Stop
offset="1"
stopColor="#83a"
@@ -120,33 +125,6 @@ class RadialGradientPercent extends Component{
}
}
class FillGradientWithOpacity extends Component{
static title = 'Fill a radial gradient with fillOpacity prop';
render() {
return <Svg
height="150"
width="300"
>
<Defs>
<RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<Stop
offset="0%"
stopColor="#fff"
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor="#00f"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" fillOpacity="0.2" />
</Svg>;
}
}
class RadialGradientPart extends Component{
static title = 'Define another ellipse with a radial gradient from white to blue';
render() {
@@ -174,6 +152,32 @@ class RadialGradientPart extends Component{
}
class FillGradientWithOpacity extends Component{
static title = 'Fill a radial gradient with fillOpacity prop';
render() {
return <Svg
height="150"
width="300"
>
<Defs>
<RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<Stop
offset="0%"
stopColor="#fff"
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor="#00f"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" fillOpacity="0.2" />
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"