From 01ed35959e3c1a5559f4a5d61f189e6c2328f6b5 Mon Sep 17 00:00:00 2001 From: Flavio Silva Date: Tue, 19 Feb 2019 10:22:59 -0300 Subject: [PATCH 1/3] [docs] Add pencil example to showcase how to cascade color. --- README.md | 29 +++++++++++++++++++++++++---- screenShoots/pencil.png | Bin 0 -> 19533 bytes 2 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 screenShoots/pencil.png diff --git a/README.md b/README.md index fd513fdc..72236c46 100644 --- a/README.md +++ b/README.md @@ -70,15 +70,15 @@ # NOTICE: -Due to breaking changes in react-native, the version given in the left column +Due to breaking changes in react-native, the version given in the left column (and higher versions) of react-native-svg only supports the react-native version in the right column (and higher versions, if possible). -It is recommended to use the version of react given in the peer dependencies +It is recommended to use the version of react given in the peer dependencies of the react-native version you are using. The latest version of react-native-svg should always work in a clean react-native project. - + | react-native-svg | react-native | |------------------|--------------| | 3.2.0 | 0.29 | @@ -181,7 +181,7 @@ react-native link ``` Make a reproduction of the problem in `App.js` - + ```bash react-native run-ios react-native run-android @@ -395,6 +395,27 @@ originY | 0 | Transform originY coordinates for the current obj ``` +You can cascade colors from the Svg element to its children: + +```html + + + + +``` + +![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenShoots/pencil.png) + ### Rect The element is used to create a rectangle and variations of a rectangle shape: diff --git a/screenShoots/pencil.png b/screenShoots/pencil.png new file mode 100644 index 0000000000000000000000000000000000000000..7730a1b55a9e60d400c2818038d5ee092e21b797 GIT binary patch literal 19533 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 Ijl2{72jh#{ng9R* literal 0 HcmV?d00001 From 5d1b0eece53af02dbb39cec21304090d7265a1bf Mon Sep 17 00:00:00 2001 From: Flavio Silva Date: Tue, 19 Feb 2019 10:46:38 -0300 Subject: [PATCH 2/3] [docs] Add a code explanation section to the color cascade (pencil) example. --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 72236c46..fed84975 100644 --- a/README.md +++ b/README.md @@ -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) + 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 The element is used to create a rectangle and variations of a rectangle shape: From 47e2e02bf576a2e2199ed157e4b9e41c99fb2657 Mon Sep 17 00:00:00 2001 From: Flavio Silva Date: Tue, 19 Feb 2019 14:24:34 -0300 Subject: [PATCH 3/3] [docs] Change 'cascade' wording to 'inheritance'. --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fed84975..29a43347 100644 --- a/README.md +++ b/README.md @@ -395,7 +395,7 @@ originY | 0 | Transform originY coordinates for the current obj ``` -You can cascade colors from the Svg element to its children: +Colors set in the Svg element are inherited by its children: ```html