diff --git a/README.md b/README.md index fccb6fb0..3a9bb929 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,20 @@ There is an easy example ``` import Svg,{ - Circle + Circle, + Ellipse, + G, + LinearGradient, + RadialGradient, + Line, + Path, + Polygon, + Polyline, + Rect, + Symbol, + Text, + Use, + Defs } from 'react-native-art-svg'; class SvgExample extends Component { @@ -102,6 +115,233 @@ originY | 0 | Transform originY coordinates for the current obj #### Supported elements: +- Svg + +``` + + + + + + +; +``` + +- Rect + +The element is used to create a rectangle and variations of a rectangle shape: + +``` + + + +``` + +![Rect](./screenShoots/rect.png) + +- Circle + +The element is used to create a circle: + +``` + + + +``` + +![Rect](./screenShoots/circle.png) + + Code explanation: + + * The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) + * The r attribute defines the radius of the circle + +- Ellipse + +The element is used to create an ellipse. + +An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius + +``` + + + +``` +![Rect](./screenShoots/ellipse.png) + + Code explanation: + + * The cx attribute defines the x coordinate of the center of the ellipse + * The cy attribute defines the y coordinate of the center of the ellipse + * The rx attribute defines the horizontal radius + * The ry attribute defines the vertical radius + +- Line + +The element is an SVG basic shape, used to create a line connecting two points. + +``` + + + +``` + +![Rect](./screenShoots/line.png) + + Code explanation: + + * The x1 attribute defines the start of the line on the x-axis + * The y1 attribute defines the start of the line on the y-axis + * The x2 attribute defines the end of the line on the x-axis + * The y2 attribute defines the end of the line on the y-axis + +- Polygon + +The element is used to create a graphic that contains at least three sides. +Polygons are made of straight lines, and the shape is "closed" (all the lines connect up). + +``` + + + +``` + +![Rect](./screenShoots/polygon.png) + + Code explanation: + + * The points attribute defines the x and y coordinates for each corner of the polygon + +- Polyline + +The element is used to create any shape that consists of only straight lines: + +``` + + + +``` + +![Rect](./screenShoots/polyline.png) + + Code explanation: + + * The points attribute defines the x and y coordinates for each point of the polyline + +- Path + +The element is used to define a path. +The following commands are available for path data: + + * M = moveto + * L = lineto + * H = horizontal lineto + * V = vertical lineto + * C = curveto + * S = smooth curveto + * Q = quadratic Bézier curve + * T = smooth quadratic Bézier curveto + * A = elliptical Arc + * Z = closepath +`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned. + +``` + + + +``` + +![Rect](./screenShoots/path.png) + + +- Text + +The element is used to define a text. + +``` + + STROKED TEXT + +``` + +![Rect](./screenShoots/text.png) #### Run example: @@ -124,3 +364,4 @@ npm install [SVG bounding Algorithm](https://github.com/icons8/svg-path-bounding-box) [Circle drawing with svg arc path](http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334) +[w3schools.com SVG Tutorial](http://www.w3schools.com/svg/) diff --git a/screenShoots/circle.png b/screenShoots/circle.png new file mode 100644 index 00000000..fc9a8215 Binary files /dev/null and b/screenShoots/circle.png differ diff --git a/screenShoots/ellipse.png b/screenShoots/ellipse.png new file mode 100644 index 00000000..d8fb6a01 Binary files /dev/null and b/screenShoots/ellipse.png differ diff --git a/screenShoots/line.png b/screenShoots/line.png new file mode 100644 index 00000000..ce0544f4 Binary files /dev/null and b/screenShoots/line.png differ diff --git a/screenShoots/path.png b/screenShoots/path.png new file mode 100644 index 00000000..8620c9de Binary files /dev/null and b/screenShoots/path.png differ diff --git a/screenShoots/polygon.png b/screenShoots/polygon.png new file mode 100644 index 00000000..2ee847c6 Binary files /dev/null and b/screenShoots/polygon.png differ diff --git a/screenShoots/polyline.png b/screenShoots/polyline.png new file mode 100644 index 00000000..20ab1c0c Binary files /dev/null and b/screenShoots/polyline.png differ diff --git a/screenShoots/rect.png b/screenShoots/rect.png new file mode 100644 index 00000000..c94eec3c Binary files /dev/null and b/screenShoots/rect.png differ diff --git a/screenShoots/text.png b/screenShoots/text.png new file mode 100644 index 00000000..8d8ec18e Binary files /dev/null and b/screenShoots/text.png differ