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

complete elements percentage props support

Browse Source 
Support Rect, Circle, Line, Ellipse percentage props
And support percentage props for gradients
This commit is contained in:
Horcrux
2016-04-27 16:09:38 +08:00
parent cd77525a7b
commit c2359616bf
11 changed files with 291 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
Example/examples/Text.js
View File

@@ -60,6 +60,34 @@ class TextRotate extends Component{
}
}
// TODO: iOS not support text stroke with pattern
class TextStroke extends Component{
static title = 'Stroke the text';
render() {
return <Svg
height="60"
width="200"
>
<Defs>
<LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="100%" stopColor="red" stopOpacity="1" />
<Stop offset="0%" stopColor="#000" stopOpacity="0.5" />
</LinearGradient>
</Defs>
<Text
stroke="url(#grad)"
strokeWidth="2"
fill="none"
fontSize="30"
fontWeight="bold"
x="100"
y="20"
textAnchor="middle"
>STROKE TEXT</Text>
</Svg>;
}
}
class TextFill extends Component{
static title = 'Fill the text with LinearGradient';
render() {
@@ -68,8 +96,8 @@ class TextFill extends Component{
width="200"
>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="200" y2="0">
<Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
<LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0.5" />
<Stop offset="100%" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
@@ -87,34 +115,6 @@ class TextFill extends Component{
}
}
// TODO: iOS not support text stroke with pattern
class TextStroke extends Component{
static title = 'Stroke the text';
render() {
return <Svg
height="60"
width="200"
>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="100" y2="0">
<Stop offset="100%" stopColor="#fff" stopOpacity="0" />
<Stop offset="0%" stopColor="#000" stopOpacity="1" />
</LinearGradient>
</Defs>
<Text
stroke="url(#grad)"
strokeWidth="2"
fill="none"
fontSize="30"
fontWeight="bold"
x="100"
y="20"
textAnchor="middle"
>STROKE TEXT</Text>
</Svg>;
}
}
class TextPath extends Component{
static title = 'Transform the text';
@@ -154,7 +154,13 @@ const icon = <Svg
>字</Text>
</Svg>;
const samples = [TextExample, TextRotate, TextStroke, TextFill, TextPath];
const samples = [
TextExample,
TextRotate,
TextStroke,
TextFill,
TextPath
];
export {
icon,