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

add support for text clipping and support for text fill pattern

Browse Source
This commit is contained in:
Horcrux
2016-04-22 22:21:44 +08:00
parent 74b5e82781
commit 2eda0e8ce2
4 changed files with 97 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Example/examples/Text.js
View File

@@ -3,7 +3,11 @@ import React, {
} from 'react-native';
import Svg, {
Text
Text,
LinearGradient,
Stop,
Defs,
ClipPath
} from 'react-native-svg';
class TextExample extends Component{
@@ -55,6 +59,34 @@ class TextRotate extends Component{
}
}
class TextFill extends Component{
static title = 'Fill the text with LinearGradient';
render() {
return <Svg
height="60"
width="200"
>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="200" y2="0">
<Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
<Stop offset="100%" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Text
fill="url(#grad)"
stroke="purple"
fontSize="20"
fontWeight="bold"
x="100"
y="20"
textAnchor="center"
>FILL TEXT</Text>
</Svg>;
}
}
// TODO: not supported
class TextStroke extends Component{
static title = 'Stroke the text';
render() {
@@ -62,21 +94,28 @@ class TextStroke extends Component{
height="60"
width="200"
>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="100" y2="0">
<Stop offset="100%" stopColor="rgb(255,255,0)" stopOpacity="0" />
<Stop offset="0%" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Text
stroke="url(#grad)"
strokeWidth="4"
fill="none"
stroke="purple"
fontSize="20"
fontWeight="bold"
x="100"
y="20"
alignment="center"
>STROKED TEXT</Text>
textAnchor="center"
>STROKE TEXT</Text>
</Svg>;
}
}
// TODO: wait for official done
class TextPath extends Component{
static title = 'Transform the text';
render() {
@@ -112,7 +151,7 @@ const icon = <Svg
>字</Text>
</Svg>;
const samples = [TextExample, TextRotate, TextStroke, TextPath];
const samples = [TextExample, TextRotate, TextFill, TextPath];
export {
icon,