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

finish Symbol refactor

Browse Source 
finish Symbol refactor
finish all reusable elements refactor (iOS)
This commit is contained in:
Horcrux
2016-07-24 11:41:00 +08:00
parent 10b28434bb
commit cbea7a4edb
14 changed files with 103 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/examples/Definations.js
+9 -5
View File
@@ -41,10 +41,10 @@ class DefsExample extends Component{
<Stop offset="100%" stopColor="blue" />
</RadialGradient>
</Defs>
<Use href="url(#path)" x="0" fill="blue" opacity="0.6" />
<Use href="url(#path)" x="20" y="5" fill="url(#linear)" />
<Use href="url(#path)" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" />
<Use href="url(#path)" x="-10" y="20" fill="red" fill="url(#radial)" />
<Use href="#path" x="0" fill="blue" opacity="0.6" />
<Use href="#path" x="20" y="5" fill="url(#linear)" />
<Use href="#path" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" />
<Use href="#path" x="-10" y="20" fill="red" fill="url(#radial)" />
</Svg>;
}
}
@@ -57,8 +57,12 @@ const icon = <Svg
<G id="path" scale="0.5">
<Path fill='red' d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"/>
</G>
<ClipPath id="clip">
<Circle r="50%" cx="0%" cy="0%" />
</ClipPath>
</Defs>
<Use href="url(#path)" fill="#3a8" />
<Use href="#path" fill="#3a8" />
<Use href="#path" fill="red" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" />
</Svg>;
Example/examples/G.js
+1 -1
View File
@@ -97,7 +97,7 @@ class GTransform extends Component{
>
Text grouped with shapes</Text>
</G>
<Use href="url(#group)" x="5" y="20" rotate="-50" stroke="red" />
<Use href="#group" x="5" y="20" rotate="-50" stroke="red" opacity="0.5" />
</Svg>;
}
}
Example/examples/Symbol.js
+9 -7
View File
@@ -15,25 +15,27 @@ class SymbolExample extends Component{
height="150"
width="110"
>
<Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
<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="url(#symbol)"
href="#symbol"
x="0"
y="0"
width="100"
height="50"
/>
<Use
href="url(#symbol)"
href="#symbol"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="url(#symbol)"
href="#symbol"
x="0"
y="100"
width="50"
@@ -47,20 +49,20 @@ const icon = <Svg
height="20"
width="20"
>
<Symbol id="symbol" viewbox="0 0 150 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="url(#symbol)"
href="#symbol"
x="0"
y="0"
width="20"
height="10"
/>
<Use
href="url(#symbol)"
href="#symbol"
x="0"
y="12"
width="20"
Example/examples/Use.js
+6 -6
View File
@@ -27,8 +27,8 @@ class UseExample extends Component{
</G>
</G>
</Defs>
<Use href="url(#shape)" x="20" y="0"/>
<Use href="url(#shape)" x="170"y="0" />
<Use href="#shape" x="20" y="0"/>
<Use href="#shape" x="170"y="0" />
</Svg>;
}
}
@@ -43,9 +43,9 @@ class UseShapes extends Component{
<G id="shape">
<Rect x="0" y="0" width="50" height="50" />
</G>
<Use href="url(#shape)" x="75" y="50" fill="#0f0"/>
<Use href="url(#shape)" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="url(#shape)" x="150" y="50" stroke="#0f0" fill="none"/>
<Use href="#shape" x="75" y="50" fill="#0f0"/>
<Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
</Svg>;
}
}
@@ -60,7 +60,7 @@ const icon = <Svg
stroke="#8a3"
id="line"
/>
<Use href="url(#line)" x="10" stroke="#3a8" />
<Use href="#line" x="10" stroke="#3a8" />
</Svg>;
const samples = [UseExample, UseShapes];