Skip to content

Commit

Permalink
[docs] Add pencil example to showcase how to cascade color.
Browse files Browse the repository at this point in the history
  • Loading branch information
flsilva committed Feb 19, 2019
1 parent be6a517 commit 01ed359
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 4 deletions.
29 changes: 25 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -395,6 +395,27 @@ originY | 0 | Transform originY coordinates for the current obj
</Svg>
```
You can cascade colors from the Svg element to its children:
```html
<Svg
width="130"
height="130"
fill="blue"
stroke="red"
color="green"
viewBox="-16 -16 544 544"
>
<Path
d="M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z"
strokeWidth="32"
/>
<Path d="M0,0L512,512" stroke="currentColor" strokeWidth="32" />
</Svg>
```
![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenShoots/pencil.png)
### Rect
The <Rect> element is used to create a rectangle and variations of a rectangle shape:
Expand Down
Binary file added screenShoots/pencil.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 01ed359

Please sign in to comment.