From 1860a2fb18f67272f6606ad35dd6809313038d33 Mon Sep 17 00:00:00 2001 From: Mikael Sand Date: Thu, 3 Oct 2019 12:06:35 +0300 Subject: [PATCH] Update README.md Add intro to marker element and attributes --- README.md | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e7418417..9845ebbe 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,7 @@ - [RadialGradient](#radialgradient) - [Mask](#mask) - [Pattern](#pattern) + - [Marker](#marker) - [Touch Events](#touch-events) - [Run example](#run-example) - [TODO](#todo) @@ -1025,7 +1026,7 @@ Code explanation: #### Pattern A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties ‘fill’ and ‘stroke’ on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern. -The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). +The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). @@ -1048,7 +1049,7 @@ The element must be nested within a [<Defs>](#defs) tag. The [<D ![Pattern](https://www.w3.org/TR/SVG11/images/pservers/pattern01.svg) +#### Marker + +A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of ‘path’, ‘line’ or ‘polyline’ elements. Polymarkers can be defined by attaching a marker to all vertices of a ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element. + +The graphics for a marker are defined by a ‘marker’ element. To indicate that a particular ‘marker’ element should be rendered at the vertices of a particular ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element, set one or more marker properties (‘marker’, ‘marker-start’, ‘marker-mid’ or ‘marker-end’) to reference the given ‘marker’ element. + + + +```jsx + + + + + + + + + +``` + +Code explanation: + +![Marker](https://www.w3.org/TR/SVG11/images/painting/marker.svg) + #### Touch Events Touch events are supported in react-native-svg. These include: