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

35
Example/examples/Clipping.js
View File

@@ -138,6 +138,39 @@ class ClipPathElement extends Component{
}
}
class TextClipping extends Component{
static title = 'Transform the text';
render() {
return <Svg
height="60"
width="200"
>
<Defs>
<ClipPath id="clip">
<Circle cx="-60" cy="15" r="10"/>
<Circle cx="-40" cy="15" r="10"/>
<Circle cx="-20" cy="15" r="10"/>
<Circle cx="0" cy="15" r="10"/>
<Circle cx="20" cy="15" r="10"/>
<Circle cx="40" cy="15" r="10"/>
<Circle cx="60" cy="15" r="10"/>
</ClipPath>
</Defs>
<Text
x="100"
y="30"
fill="red"
fontSize="22"
fontWeight="bold"
fill="red"
stroke="blue"
textAnchor="center"
clipPath="url(#clip)"
>NOT THE FACE</Text>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -180,7 +213,7 @@ const icon = <Svg
</G>
</Svg>;
const samples = [ClipPathAttr, ClipRule, ClipPathElement];
const samples = [ClipPathAttr, ClipRule, ClipPathElement, TextClipping];
export {
icon,