zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-26 04:19:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

add ClipPath element support

Browse Source
This commit is contained in:
Horcrux
2016-04-21 17:55:18 +08:00
parent 7859813eac
commit 7d3ef84163
14 changed files with 197 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/examples/Clipping.js
+47 -5
View File
@@ -7,13 +7,15 @@ import Svg, {
Defs,
RadialGradient,
Stop,
Line,
Rect,
Text,
G
Ellipse,
G,
Polygon,
Circle
} from 'react-native-art-svg';
class ClipPathExample extends Component{
class ClipPathAttr extends Component{
static title = 'Clip by set clip-path with a path data';
render() {
return <Svg
@@ -46,7 +48,7 @@ class ClipPathExample extends Component{
}
}
class ClipRulePathExample extends Component{
class ClipRule extends Component{
static title = 'Clip a group with clipRule="evenodd"';
render() {
return <Svg
@@ -90,6 +92,46 @@ class ClipRulePathExample extends Component{
}
}
class ClipPathElement extends Component{
static title = 'Clip by set clip-path with a path data';
render() {
return <Svg
height="100"
width="100"
>
<Defs>
<RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%">
<Stop
offset="0%"
stopColor="#ff0"
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor="#00f"
stopOpacity="1"
/>
</RadialGradient>
<ClipPath id="clip">
<Circle cx="30" cy="30" r="20"/>
<Ellipse cx="60" cy="70" rx="20" ry="10" />
<Rect x="65" y="15" width="30" height="30" />
<Polygon points="20,60 20,80 50,70" />
</ClipPath>
</Defs>
<Rect
x="0"
y="0"
width="100"
height="100"
fill="url(#grad)"
clipPath="url(#clip)"
/>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -132,7 +174,7 @@ const icon = <Svg
</G>
</Svg>;
const samples = [ClipPathExample, ClipRulePathExample];
const samples = [ClipPathAttr, ClipRule, ClipPathElement];
export {
icon,