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

Add G example and add viewbox for Svg

Browse Source 
Add G example and add viewbox for Svg
This commit is contained in:
Horcrux
2016-01-23 16:08:19 +08:00
parent d40921354b
commit 1fecd0a015
7 changed files with 254 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/examples/G.js
+131
View File
@@ -0,0 +1,131 @@
import React, {
Component
} from 'react-native';
import Svg, {
G,
Circle,
Line,
Rect,
Text
} from 'react-native-art-svg';
class GExample extends Component{
static title = 'G children props inherit';
render() {
return <Svg
height="100"
width="100"
>
<G
r="11"
fill="purple"
stroke="pink"
strokeWidth="3"
>
<Circle
cx="25"
cy="25"
/>
<Circle
cx="25"
cy="75"
/>
<Circle
cx="50"
cy="50"
fill="green"
/>
<Circle
cx="75"
cy="25"
/>
<Circle
cx="75"
cy="75"
/>
</G>
</Svg>;
}
}
class GTransform extends Component{
static title = 'G transform';
render() {
return <Svg
height="100"
width="200"
>
<G
rotate="50"
origin="100, 50"
>
<Line
x1="60"
y1="10"
x2="140"
y2="10"
stroke="#060"
/>
<Rect
x="60"
y="20"
height="50"
width="80"
stroke="#060"
fill="#060"
/>
<Text
x="100"
y="75"
stroke="#600"
fill="#600"
textAnchor="center"
>
Text grouped with shapes</Text>
</G>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<G
r="3"
fill="purple"
stroke="pink"
>
<Circle
cx="5"
cy="5"
/>
<Circle
cx="5"
cy="15"
/>
<Circle
cx="10"
cy="10"
fill="green"
/>
<Circle
cx="15"
cy="5"
/>
<Circle
cx="15"
cy="15"
/>
</G>
</Svg>;
const samples = [GExample, GTransform];
export {
icon,
samples
}
Example/examples/Svg.js
+20 -31
View File
@@ -4,7 +4,8 @@ import React, {
import Svg, {
Circle,
Rect
Rect,
Path
} from 'react-native-art-svg';
class SvgExample extends Component{
@@ -35,35 +36,6 @@ class SvgExample extends Component{
}
}
class SvgViewbox extends Component{
static title = 'SVG with `viewbox` prop';
render() {
return <Svg
height="100"
width="100"
viewbox="30 30 70 70"
>
<Circle
cx="50"
cy="50"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Rect
x="15"
y="15"
width="70"
height="70"
stroke="red"
strokeWidth="2"
fill="yellow"
/>
</Svg>;
}
}
class SvgOpacity extends Component{
static title = 'SVG with `opacity` prop';
render() {
@@ -93,6 +65,23 @@ class SvgOpacity extends Component{
}
}
class SvgViewbox extends Component{
static title = 'SVG with `viewbox="40 20 100 40"`';
render() {
return <Svg
height="100"
width="100"
viewbox="40 20 100 40"
>
<Rect x="0" y="0" width="100" height="100" fill="black" />
<Circle cx="50" cy="50" r="30" fill="yellow" />
<Circle cx="40" cy="40" r="4" fill="black" />
<Circle cx="60" cy="40" r="4" fill="black" />
<Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -116,7 +105,7 @@ const icon = <Svg
/>
</Svg>;
const samples = [SvgExample, SvgOpacity];
const samples = [SvgExample, SvgOpacity ,SvgViewbox];
export {
icon,