zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 14:05:09 +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

51
Example/examples/Svg.js
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,