zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-06 00:12:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[docs] Add a code explanation section to the color cascade (pencil) example.

Browse Source
This commit is contained in:
Flavio Silva
2019-02-19 10:46:38 -03:00
parent 01ed35959e
commit 5d1b0eece5
1 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -416,6 +416,12 @@ You can cascade colors from the Svg element to its children:
![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenShoots/pencil.png) ![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenShoots/pencil.png)
Code explanation:
* fill prop defines the color inside the object.
* stroke prop defines the color of the line drawn around the object.
* color is a bit special in the sense that it won't color anything by itself, but define a kind of color variable that can be reused by children elements. In this example we're defining a "green" color in the Svg element and using it in the second Path element via stroke="currentColor". The "currentColor" is what refers to that "green" value, and it can be used by other props that accept colors too, e.g. fill="currentColor".
### Rect ### Rect
The <Rect> element is used to create a rectangle and variations of a rectangle shape: The <Rect> element is used to create a rectangle and variations of a rectangle shape: