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 Symbol element refactor viewbox

Browse Source 
Add Symbol element refactor viewbox
This commit is contained in:
Horcrux
2016-01-25 18:07:06 +08:00
parent 2556c2537e
commit 50b941c4bc
9 changed files with 256 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Example/examples/Symbol.js Normal file
View File

@@ -0,0 +1,79 @@
import React, {
Component
} from 'react-native';
import Svg, {
Symbol,
Circle,
Use
} from 'react-native-art-svg';
class SymbolExample extends Component{
static title = 'Symbol example';
render() {
return <Svg
height="150"
width="110"
>
<Symbol id="symbol" viewbox="0 0 150 110">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
width="100"
height="50"
/>
<Use
href="#symbol"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="#symbol"
x="0"
y="100"
width="50"
height="25"
/>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Symbol id="symbol" viewbox="0 0 150 110">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
width="20"
height="10"
/>
<Use
href="#symbol"
x="0"
y="12"
width="20"
height="8"
/>
</Svg>;
const samples = [SymbolExample];
export {
icon,
samples
}