zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-25 20:09:12 +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
Example/examples/Svg.js
+1
View File
@@ -72,6 +72,7 @@ class SvgViewbox extends Component{
height="100"
width="100"
viewbox="40 20 100 40"
preserveAspectRatio="none"
>
<Rect x="0" y="0" width="100" height="100" fill="black" />
<Circle cx="50" cy="50" r="30" fill="yellow" />
Example/examples/Symbol.js
+79
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
}