Draw a Line Inside an Svg Circle
react-native-svg
react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web.
Check out the demo
Looking for maintainers
https://github.com/react-native-svg/react-native-svg/issues/1554
Features
- Supports most SVG elements and backdrop (Rect, Circumvolve, Line, Polyline, Polygon, G ...).
- Easy to catechumen SVG code to react-native-svg.
- Installation
- Automatically
- Manually
- Android
- iOS
- Troubleshooting
- Opening issues
- Usage
- Utilize with content loaded from uri
- Use with svg files
- Use with xml strings
- Common props
- Supported elements
- Svg
- Rect
- Circle
- Ellipse
- Line
- Polygon
- Polyline
- Path
- Text
- TSpan
- TextPath
- G
- Utilize
- Symbol
- Defs
- Image
- ClipPath
- LinearGradient
- RadialGradient
- Mask
- Pattern
- Marker
- ForeignObject
- Bear on Events
- Serialize
- Run case
- TODO
- Known bug
Installation
Automatically
With expo-cli
✅ The Expo customer app comes with the native code installed!
Install the JavaScript with:
expo install react-native-svg
With react-native-cli
-
Install library
from npm
npm install react-native-svg
from yarn
yarn add together react-native-svg
-
Link native lawmaking
With autolinking (react-native 0.lx+)
Pre 0.60
react-native link react-native-svg
NOTICE:
Due to breaking changes in react-native, the version given in the left column (and higher versions) of react-native-svg simply supports the react-native version in the right column (and higher versions, if possible).
It is recommended to utilize 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 e'er work in a clean react-native project.
| react-native-svg | react-native |
|---|---|
| three.ii.0 | 0.29 |
| four.2.0 | 0.32 |
| 4.three.0 | 0.33 |
| 4.4.0 | 0.38 |
| 4.5.0 | 0.twoscore |
| 5.i.8 | 0.44 |
| v.2.0 | 0.45 |
| five.3.0 | 0.46 |
| v.4.1 | 0.47 |
| v.five.ane | >=0.l |
| >=6 | >=0.l |
| >=7 | >=0.57.4 |
| >=8 | >=0.57.iv |
| >=9 | >=0.57.4 |
Or, include this PR manually for v7+ stability on android for older RN ( included in 0.57-stable and newer).
The latest version of v6, v7, v8 and v9 should all work in the latest react-native version.
v7 and newer requires the patch for making android thread safe, to become native animation support.
Manually
Android pre RN 0.60
-
yarn add react-native-svgIn RN 0.60+, this is all you should always need to do go Android working. Earlier this, react-native link was responsible for the following steps: -
Append the following lines to
android/settings.gradle:include ':react-native-svg' project( ':react-native-svg' ).projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android' )
-
Insert the following lines inside the dependencies cake in
android/app/build.gradle:implementation project( ':react-native-svg' ) -
Open
android/app/src/master/java/[...]/MainApplication.java
- Add
import com.horcrux.svg.SvgPackage;to the imports at the top of the file - Add
new SvgPackage()to the list returned by thegetPackages()method. Add a comma to the previous particular if there's already something there.
iOS pre RN 0.lx
Manual linking
To install react-native-svg on iOS visit the link referenced above or do the following (react-native link should do this for you):
- Open up your project in XCode and drag the
RNSVG.xcodeprojfile (located in.../node_modules/react-native-svg/ios) into the Libraries directory shown in XCode. - Expand the
RNSVG.xcodeprojfile y'all merely added to XCode until you see:libRNSVG.a(located inRNSVG.xcodeproj>Products) - Drag
libRNSVG.ainto the Link Binary With Libraries section (located in Build Phases which may be institute at the elevation of the XCode window)
CocoaPods
Alternatively, you tin can utilize CocoaPods to manage your native (Objective-C and Swift) dependencies:
- Add RNSVG to your Podfile (with RN 0.60+ autolinking, this is not needed)
pod 'RNSVG' , :path => '../node_modules/react-native-svg' If cocoapods is used and if error RNSVGImage.yard:12:9: 'React/RCTImageLoader.h' file not found occurs:
Add the following entry in Podfile:
pod 'React' , :path => '../node_modules/react-native' , :subspecs => [ [...] 'RCTImage ' , # <-- Add together RCTImage ] and run pod install from ios binder
Troubleshooting
Problems with Proguard
When Proguard is enabled (which information technology is by default for Android release builds), it causes runtime error. To avoid this, add together an exception to android/app/proguard-rules.pro:
-keep public grade com.horcrux.svg.** {* ;} If y'all accept build errors, and then it might be caused past caching issues, please attempt:
watchman lookout-del-all rm -fr $TMPDIR/react-* react-native first --reset-cache Or, rm -rf node_modules yarn react-native start --reset-enshroud Unexpected behavior
If you have unexpected behavior, please create a make clean projection with the latest versions of react-native and react-native-svg
react-native init CleanProject cd CleanProject/ yarn add react-native-svg cd ios && pod install && cd .. Make a reproduction of the trouble in App.js
react-native run-ios react-native run-android Opening issues
Verify that information technology is nevertheless an event with the latest version as specified in the previous step. If and so, open a new issue, include the unabridged App.js file, specify what platforms you've tested, and the results of running this control:
If you suspect that y'all've found a spec conformance bug, then y'all can examination using your component in a react-native-spider web projection by forking this codesandbox, to see how dissimilar browsers render the same content: https://codesandbox.io/s/pypn6mn3y7 If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap.
Usage
Here'south a simple case. To render output like this:
Use the post-obit code:
import Svg , { Circle , Ellipse , G , Text , TSpan , TextPath , Path , Polygon , Polyline , Line , Rect , Use , Image , Symbol , Defs , LinearGradient , RadialGradient , Cease , ClipPath , Pattern , Mask , } from 'react-native-svg' ; import React from 'react' ; import { View , StyleSheet } from 'react-native' ; consign default class SvgExample extends React . Component { render ( ) { render ( < View way = { [ StyleSheet . absoluteFill , { alignItems: 'heart' , justifyContent: 'center' } , ] } > < Svg height = "l%" width = "fifty%" viewBox = "0 0 100 100" > < Circle cx = "fifty" cy = "50" r = "45" stroke = "blue" strokeWidth = "2.five" fill = "greenish" / > < Rect x = "xv" y = "15" width = "70" height = "70" stroke = "scarlet" strokeWidth = "ii" fill = "yellow" / > < / Svg > < / View > ) ; } } Try this on Snack
Use with content loaded from uri
import * as React from 'react' ; import { SvgUri } from 'react-native-svg' ; export default ( ) => ( < SvgUri width = "100%" acme = "100%" uri = "http://thenewcode.com/avails/images/thumbnails/homer-simpson.svg" / > ) ; CSS Back up
If remote SVG file contains CSS in <style> element, use SvgCssUri:
import * as React from 'react' ; import { SvgCssUri } from 'react-native-svg' ; export default ( ) => ( < SvgCssUri width = "100%" superlative = "100%" uri = "http://thenewcode.com/assets/svg/accessibility.svg" / > ) ; Use with svg files
Endeavour react-native-svg-transformer to get compile time conversion and cached transformations. https://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration https://github.com/kristerkari/react-native-svg-transformer#for-react-native-v057-or-newer--expo-sdk-v3100-or-newer
metro.config.js
const { getDefaultConfig } = require ( 'metro-config' ) ; module . exports = ( async ( ) => { const { resolver: { sourceExts, assetExts } , } = await getDefaultConfig ( ) ; return { transformer: { babelTransformerPath: crave . resolve ( 'react-native-svg-transformer' ) , } , resolver: { assetExts: assetExts . filter ( ext => ext !== 'svg' ) , sourceExts: [...sourceExts , 'svg' ] , } , } ; } ) ( ) ; Import your .svg file inside a React component:
import Logo from './logo.svg' ; You can then use your image as a component:
< Logo width = { 120 } height = { forty } / > Alternatively, you can apply SvgXml with babel-plugin-inline-import, but with transforms done at run-time.
.babelrc
{ "presets": [ "module:metro-react-native-boom-boom-preset" ], "plugins": [ [ "boom-boom-plugin-inline-import" , { "extensions": [ ".svg" ] } ] ] } App.js
import * as React from 'react' ; import { SvgXml } from 'react-native-svg' ; import testSvg from './examination.svg' ; export default ( ) => < SvgXml width = "200" height = "200" xml = { testSvg } / > ; Use with xml strings
import * as React from 'react' ; import { SvgXml } from 'react-native-svg' ; const xml = ` <svg width="32" height="32" viewBox="0 0 32 32"> <path fill-rule="evenodd" clip-dominion="evenodd" make full="url(#slope)" d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 one.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 eighteen 5H20C20.5523 5 21 five.44772 21 6V25C21 25.5523 20.5523 26 xx 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 eleven 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 eleven.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 v xviii.4477 5 19V25C5 25.5523 v.44772 26 vi 26H8C8.55228 26 nine 25.5523 ix 25V19C9 18.4477 8.55228 xviii 8 18H6ZM24 14C23.4477 fourteen 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 xiv.4477 26.5523 14 26 14H24Z" /> <defs> <linearGradient id="slope" x1="0" y1="0" x2="eight.46631" y2="37.3364" gradient-units="userSpaceOnUse"> <cease start="0" stop-color="#FEA267" /> <stop offset="1" stop-color="#E75A4C" /> </linearGradient> </defs> </svg> ` ; export default ( ) => < SvgXml xml = { xml } width = "100%" height = "100%" / > ; CSS back up
If xml cord contains CSS in <mode> element, use SvgCss:
import * as React from 'react' ; import { SvgCss } from 'react-native-svg' ; const xml = ` <svg width="32" pinnacle="32" viewBox="0 0 32 32"> <style> .ruby-red { fill: #ff0000; } </manner> <rect class="crimson" 10="0" y="0" width="32" meridian="32" /> </svg> ` ; export default ( ) => < SvgCss xml = { xml } width = "100%" height = "100%" / > ; Common props:
| Name | Default | Description |
|---|---|---|
| make full | '#000' | The fill prop refers to the color within the shape. |
| fillOpacity | ane | This prop specifies the opacity of the colour or the content the current object is filled with. |
| fillRule | nonzero | The fillRule prop determines what side of a path is inside a shape, which determines how make full will pigment the shape, can be nonzero or evenodd |
| stroke | 'none' | The stroke prop controls how the outline of a shape appears. |
| strokeWidth | 1 | The strokeWidth prop specifies the width of the outline on the current object. |
| strokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the electric current object. |
| strokeLinecap | 'square' | The strokeLinecap prop specifies the shape to be used at the stop of open subpaths when they are stroked. Can be either 'butt', 'foursquare' or 'round'. |
| strokeLinejoin | 'miter' | The strokeLinejoin prop specifies the shape to exist used at the corners of paths or bones shapes when they are stroked. Tin can be either 'miter', 'bevel' or 'round'. |
| strokeDasharray | [] | The strokeDasharray prop controls the blueprint of dashes and gaps used to stroke paths. |
| strokeDashoffset | zip | The strokeDashoffset prop specifies the distance into the nuance pattern to commencement the dash. |
| x | 0 | Interpret distance on x-axis. |
| y | 0 | Interpret altitude on y-axis. |
| rotation | 0 | Rotation caste value on the current object. |
| scale | ane | Scale value on the current object. |
| origin | 0, 0 | Transform origin coordinates for the current object. |
| originX | 0 | Transform originX coordinates for the electric current object. |
| originY | 0 | Transform originY coordinates for the current object. |
Supported elements:
Svg
< Svg meridian = "100" width = "100" > < Rect 10 = "0" y = "0" width = "100" height = "100" fill = "black" / > < Circle cx = "50" cy = "fifty" r = "30" fill up = "yellow" / > < Circle cx = "40" cy = "40" r = "iv" fill = "black" / > < Circle cx = "60" cy = "40" r = "4" fill = "black" / > < Path d = "Yard forty 60 A 10 10 0 0 0 60 sixty" stroke = "black" / > < / Svg > Colors fix in the Svg element are inherited past its children:
< Svg width = "130" height = "130" fill = "blueish" stroke = "blood-red" colour = "light-green" viewBox = "-16 -16 544 544" > < Path d = "M318.37,85.45L422.53,190.xi,158.89,455,54.79,350.38ZM501.56,60.2L455.eleven,13.53a45.93,45.93,0,0,0-65.xi,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,xiv.17l116.06-28.28L26.59,378.72Z" strokeWidth = "32" / > < Path d = "M0,0L512,512" stroke = "currentColor" strokeWidth = "32" / > < / Svg > 
Code explanation:
- The make full prop defines the color within the object.
- The stroke prop defines the color of the line drawn effectually the object.
- The color prop 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 used by children elements. In this example we're defining a "greenish" color in the Svg element and using it in the second Path chemical element via stroke="currentColor". The "currentColor" is what refers to that "green" value, and information technology tin be used in other props that accept colors too, east.m. fill="currentColor".
Rect
The element is used to create a rectangle and variations of a rectangle shape:
< Svg width = "200" superlative = "60" > < Rect x = "25" y = "five" width = "150" height = "fifty" fill up = "rgb(0,0,255)" strokeWidth = "three" stroke = "rgb(0,0,0)" / > < / Svg > 
Code caption:
- The width and height props of the element define the height and the width of the rectangle.
- The x prop defines the left position of the rectangle (e.g. 10="25" places the rectangle 25 px from the left margin).
- The y prop defines the elevation position of the rectangle (e.g. y="5" places the rectangle 5 px from the top margin).
Circle
The element is used to create a circumvolve:
< Svg summit = "100" width = "100" > < Circumvolve cx = "50" cy = "50" r = "50" fill = "pink" / > < / Svg > 
Lawmaking caption:
- The cx and cy props define the x and y coordinates of the heart of the circle. If cx and cy are omitted, the circle'due south center is set to (0,0)
- The r prop defines the radius of the circle
Ellipse
The element is used to create an ellipse.
An ellipse is closely related to a circumvolve. The difference is that an ellipse has an ten and a y radius that differs from each other, while a circle has equal x and y radius.
< Svg height = "100" width = "110" > < Ellipse cx = "55" cy = "55" rx = "50" ry = "thirty" stroke = "purple" strokeWidth = "2" fill = "yellow" / > < / Svg > 
Code caption:
- The cx prop defines the x coordinate of the center of the ellipse
- The cy prop defines the y coordinate of the centre of the ellipse
- The rx prop defines the horizontal radius
- The ry prop defines the vertical radius
Line
The element is an SVG basic shape, used to create a line connecting two points.
< Svg superlative = "100" width = "100" > < Line x1 = "0" y1 = "0" x2 = "100" y2 = "100" stroke = "red" strokeWidth = "2" / > < / Svg > 
Code explanation:
- The x1 prop defines the starting time of the line on the ten-axis.
- The y1 prop defines the start of the line on the y-axis.
- The x2 prop defines the end of the line on the x-axis.
- The y2 prop defines the terminate 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 directly lines, and the shape is "closed" (all the lines connect up).
< Svg height = "100" width = "100" > < Polygon points = "twoscore,5 70,80 25,95" make full = "lime" stroke = "majestic" strokeWidth = "i" / > < / Svg > 
Code explanation:
- The points prop defines the x and y coordinates for each corner of the polygon
Polyline
The chemical element is used to create any shape that consists of only straight lines:
< Svg height = "100" width = "100" > < Polyline points = "10,ten 20,12 30,twenty twoscore,sixty threescore,lxx 95,ninety" make full = "none" stroke = "black" strokeWidth = "3" / > < / Svg > 
Code explanation:
- The points prop 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 information:
- G = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- Southward = smoothen curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
Notation: All of the commands above can likewise be expressed with lower letters. Capital letters means admittedly positioned, lower cases means relatively positioned. Run into Path document of SVG to know parameters for each command.
< Svg superlative = "100" width = "100" > < Path d = "M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 ten L11 22 L77 95 L20 25" fill = "none" stroke = "cherry" / > < / Svg > 
Text
The element is used to ascertain text.
< Svg summit = "lx" width = "200" > < Text fill = "none" stroke = "purple" fontSize = "20" fontWeight = "bold" x = "100" y = "20" textAnchor = "eye" > STROKED TEXT < / Text > < / Svg > 
TSpan
The element is used to describe multiple lines of text in SVG. Rather than having to position each line of text absolutely, the element makes it possible to position a line of text relatively to the previous line of text.
< Svg top = "160" width = "200" > < Text y = "twenty" dx = "v five" > < TSpan x = "10" >tspan line 1< / TSpan > < TSpan x = "10" dy = "15" > tspan line 2 < / TSpan > < TSpan x = "x" dx = "x" dy = "xv" > tspan line 3 < / TSpan > < / Text > < Text x = "10" y = "60" fill = "red" fontSize = "14" > < TSpan dy = "v 10 xx" >12345< / TSpan > < TSpan fill up = "bluish" dy = "15" dx = "0 5 v" > < TSpan >6< / TSpan > < TSpan >7< / TSpan > < / TSpan > < TSpan dx = "0 10 xx" dy = "0 twenty" fontWeight = "bold" fontSize = "12" > 89a < / TSpan > < / Text > < Text y = "140" dx = "0 five 5" dy = "0 -5 -5" > delta on text < / Text > < / Svg > 
TextPath
In addition to text drawn in a straight line, SVG too includes the ability to place text along the shape of a element. To specify that a cake of text is to be rendered along the shape of a , include the given text inside a element which includes an href attribute with a reference to a element.
< Svg height = "100" width = "200" > < Defs > < Path id = "path" d = { path } / > < / Defs > < M y = "twenty" > < Text fill = "blue" > < TextPath href = "#path" startOffset = "-x%" > We become up and down, < TSpan fill = "red" dy = "five,five,5" > and so up once again < / TSpan > < / TextPath > < / Text > < Path d = { path } fill up = "none" stroke = "ruddy" strokeWidth = "i" / > < / G > < / Svg > 
M
The element is a container used to grouping other SVG elements. Transformations practical to the g chemical element are performed on all of its kid elements, and any of its props are inherited past its kid elements. It can also group multiple elements to be referenced later with the <Use /> element.
< Svg height = "100" width = "200" > < G rotation = "l" origin = "100, 50" > < Line x1 = "60" y1 = "10" x2 = "140" y2 = "10" stroke = "#060" / > < Rect x = "lx" y = "20" height = "50" width = "lxxx" stroke = "#060" fill = "#060" / > < Text ten = "100" y = "75" stroke = "#600" fill = "#600" textAnchor = "middle" > Text grouped with shapes < / Text > < / G > < / Svg > 
Use
The element tin reuse an SVG shape from elsewhere in the SVG certificate, including elements and elements. The reused shape tin can be defined inside the <Defs> element (which makes the shape invisible until used) or outside.
< Svg meridian = "100" width = "300" > < Defs > < G id = "shape" > < G > < Circle cx = "50" cy = "50" r = "50" / > < Rect x = "fifty" y = "50" width = "50" acme = "50" / > < Circumvolve cx = "50" cy = "50" r = "5" fill = "bluish" / > < / Thou > < / G > < / Defs > < Use href = "#shape" 10 = "20" y = "0" / > < Employ href = "#shape" 10 = "170" y = "0" / > < / Svg > This example shows a element defined within a <Defs> element. This makes the invisible unless referenced by a element.
Before the chemical element can exist referenced, it must have an ID attack information technology via its id prop. The element references the element via its href prop. Detect the # in forepart of the ID in the prop value.
The element specifies where to show the reused shapes via its x and y props. Notice that the shapes within the element are located at 0,0. That is washed because their position is added to the position specified in the element.
Symbol
The SVG chemical element is used to ascertain reusable symbols. The shapes nested within a are not displayed unless referenced by a element.
< Svg height = "150" width = "110" > < Symbol id = "symbol" viewBox = "0 0 150 110" width = "100" height = "50" > < Circumvolve cx = "50" cy = "fifty" r = "twoscore" strokeWidth = "8" stroke = "red" fill up = "carmine" / > < Circle cx = "ninety" cy = "lx" r = "forty" strokeWidth = "8" stroke = "green" fill = "white" / > < / Symbol > < Use href = "#symbol" x = "0" y = "0" / > < Utilise href = "#symbol" 10 = "0" y = "l" width = "75" height = "38" / > < Use href = "#symbol" ten = "0" y = "100" width = "50" height = "25" / > < / Svg > 
Defs
The element is used to embed definitions that tin exist reused inside an SVG image. For instance, yous can group SVG shapes together and reuse them equally a single shape.
Epitome
The element allows a raster epitome to be included in an Svg component.
< Svg height = "100" width = "100" > < Defs > < ClipPath id = "clip" > < Circle cx = "fifty%" cy = "50%" r = "forty%" / > < / ClipPath > < / Defs > < Rect x = "0" y = "0" width = "100%" height = "100%" fill = "blood-red" / > < Rect ten = "five%" y = "v%" width = "50%" pinnacle = "ninety%" / > < Epitome x = "5%" y = "five%" width = "50%" summit = "90%" preserveAspectRatio = "xMidYMid slice" opacity = "0.five" href = { require ( '../paradigm.jpg' ) } clipPath = "url(#prune)" / > < Text x = "l" y = "fifty" textAnchor = "middle" fontWeight = "assuming" fontSize = "16" fill = "blue" > HOGWARTS < / Text > < / Svg > 
ClipPath
The SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property
< Svg pinnacle = "100" width = "100" > < Defs > < RadialGradient id = "grad" cx = "50%" cy = "50%" rx = "fifty%" ry = "l%" fx = "50%" fy = "l%" gradientUnits = "userSpaceOnUse" > < Stop offset = "0%" stopColor = "#ff0" stopOpacity = "one" / > < Stop offset = "100%" stopColor = "#00f" stopOpacity = "1" / > < / RadialGradient > < ClipPath id = "prune" > < G scale = "0.9" x = "10" > < Circle cx = "xxx" cy = "xxx" r = "20" / > < Ellipse cx = "60" cy = "seventy" rx = "20" ry = "ten" / > < Rect x = "65" y = "fifteen" width = "30" height = "30" / > < Polygon points = "20,60 20,80 50,70" / > < Text x = "l" y = "30" fontSize = "32" fontWeight = "assuming" textAnchor = "middle" calibration = "1.ii" > Q < / Text > < / G > < / ClipPath > < / Defs > < Rect 10 = "0" y = "0" width = "100" height = "100" fill = "url(#grad)" clipPath = "url(#clip)" / > < / Svg > 
LinearGradient
The element is used to ascertain a linear gradient. The element must be nested within a <Defs> tag. The <Defs> tag is short for definitions and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:
- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
- Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
- Angular gradients are created when x1 and x2 differ and y1 and y2 differ
< Svg height = "150" width = "300" > < Defs > < LinearGradient id = "grad" x1 = "0" y1 = "0" x2 = "i" y2 = "0" > < Stop offset = "0" stopColor = "#FFD080" stopOpacity = "1" / > < Finish get-go = "1" stopColor = "red" stopOpacity = "1" / > < / LinearGradient > < / Defs > < Ellipse cx = "150" cy = "75" rx = "85" ry = "55" fill = "url(#grad)" / > < / Svg > Lawmaking caption:
- The id prop of the tag defines a unique proper name for the gradient
- The x1, x2, y1,y2 props of the tag define the kickoff and end position of the gradient
- The colour range for a slope tin be composed of two or more colors. Each color is specified with a tag. The offset prop is used to define where the gradient colour begin and end
- The fill prop links the ellipse element to the gradient
NOTICE: LinearGradient besides supports pct every bit prop:
< LinearGradient id = "grad" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%" > < Stop offset = "0%" stopColor = "rgb(255,255,0)" stopOpacity = "0" / > < End starting time = "100%" stopColor = "cherry-red" stopOpacity = "1" / > < / LinearGradient > This result is same equally the example earlier. Merely it's recommend to utilize exact number instead; it has performance advantages over using percentages.
RadialGradient
The chemical element is used to define a radial slope. The element must be nested within a <Defs> tag. The <Defs> tag is short for definitions and contains definition of special elements (such as gradients).
< Svg height = "150" width = "300" > < Defs > < RadialGradient id = "grad" cx = "150" cy = "75" rx = "85" ry = "55" fx = "150" fy = "75" gradientUnits = "userSpaceOnUse" > < Stop starting time = "0" stopColor = "#ff0" stopOpacity = "i" / > < Finish offset = "1" stopColor = "#83a" stopOpacity = "one" / > < / RadialGradient > < / Defs > < Ellipse cx = "150" cy = "75" rx = "85" ry = "55" fill = "url(#grad)" / > < / Svg > Code caption:
- The id prop of the tag defines a unique name for the gradient
- The cx, cy and r props define the outermost circumvolve and the fx and fy define the innermost circumvolve
- The color range for a gradient tin be composed of 2 or more colors. Each colour is specified with a tag. The offset prop is used to define where the slope color begin and end
- The fill prop links the ellipse element to the gradient
Mask
In SVG, you can specify that any other graphics object or 'G' element can be used as an blastoff mask for compositing the electric current object into the background.
A mask is defined with a 'Mask' element. A mask is used/referenced using the 'mask' property.
A 'Mask' can contain any graphical elements or container elements such every bit a 'G'.
The element must exist nested within a <Defs> tag. The <Defs> tag is short for definitions and contains definition of special elements (such as gradients).
https://world wide web.w3.org/TR/SVG11/images/masking/mask01.svg
< Svg width = "100%" pinnacle = "100%" viewBox = "0 0 800 300" > < Defs > < LinearGradient id = "Gradient" gradientUnits = "userSpaceOnUse" x1 = "0" y1 = "0" x2 = "800" y2 = "0" > < Stop offset = "0" stopColor = "white" stopOpacity = "0" / > < End showtime = "1" stopColor = "white" stopOpacity = "1" / > < / LinearGradient > < Mask id = "Mask" maskUnits = "userSpaceOnUse" x = "0" y = "0" width = "800" height = "300" > < Rect x = "0" y = "0" width = "800" meridian = "300" fill = "url(#Gradient)" / > < / Mask > < Text id = "Text" x = "400" y = "200" fontFamily = "Verdana" fontSize = "100" textAnchor = "middle" > Masked text < / Text > < / Defs > < Rect x = "0" y = "0" width = "800" height = "300" fill = "#FF8080" / > < Use href = "#Text" fill = "blueish" mask = "url(#Mask)" / > < Employ href = "#Text" fill = "none" stroke = "blackness" stroke-width = "2" / > < / Svg > Lawmaking explanation: https://www.w3.org/TR/SVG11/masking.html#MaskElement
v10 adds experimental support for using masks together with native elements. If you had native elements within any Svg root before (which was unsupported), Then your content might change appearance when upgrading, every bit e.g. transforms and masks now have event.
Pattern
A blueprint is used to make full or stroke an object using a pre-divers graphic object which can be replicated ("tiled") at fixed intervals in x and y to encompass the areas to be painted. Patterns are defined using a 'design' chemical element and and then referenced by backdrop '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> tag. The <Defs> tag is curt for definitions and contains definition of special elements (such as gradients).
https://www.w3.org/TR/SVG11/images/pservers/pattern01.svg
< Svg width = "100%" elevation = "100%" viewBox = "0 0 800 400" > < Defs > < Pattern id = "TrianglePattern" patternUnits = "userSpaceOnUse" x = "0" y = "0" width = "100" top = "100" viewBox = "0 0 10 x" > < Path d = "Yard 0 0 L seven 0 L three.5 7 z" fill up = "red" stroke = "blue" / > < / Pattern > < / Defs > < Rect make full = "none" stroke = "blue" x = "ane" y = "1" width = "798" top = "398" / > < Ellipse fill = "url(#TrianglePattern)" stroke = "black" strokeWidth = "5" cx = "400" cy = "200" rx = "350" ry = "150" / > < / Svg > Code explanation: https://www.w3.org/TR/SVG11/pservers.html#PatternElement
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 tin be defined past attaching a mark to the kickoff or end vertices of 'path', 'line' or 'polyline' elements. Polymarkers can exist defined by attaching a marker to all vertices of a 'path', 'line', 'polyline' or 'polygon' chemical element.
The graphics for a marking are divers by a 'marking' element. To bespeak that a detail 'marker' chemical element should be rendered at the vertices of a particular 'path', 'line', 'polyline' or 'polygon' element, prepare one or more than mark backdrop ('marker', 'marker-beginning', 'marker-mid' or 'marker-end') to reference the given 'marker' chemical element.
https://world wide web.w3.org/TR/SVG11/images/painting/marker.svg
< Svg width = "400" height = "200" viewBox = "0 0 4000 2000" > < Defs > < Marker id = "Triangle" viewBox = "0 0 ten 10" refX = "0" refY = "5" markerUnits = "strokeWidth" markerWidth = "4" markerHeight = "3" orient = "auto" > < Path d = "Thousand 0 0 Fifty 10 5 L 0 10 z" / > < / Marker > < / Defs > < Rect x = "10" y = "10" width = "3980" height = "1980" make full = "none" stroke = "blueish" strokeWidth = "10" / > < Path d = "M g 750 Fifty 2000 750 50 2500 1250" make full = "none" stroke = "black" strokeWidth = "100" markerEnd = "url(#Triangle)" / > < / Svg > Code explanation: https://www.w3.org/TR/SVG11/painting.html#Markers
import React from 'react' ; import { StyleSheet , View } from 'react-native' ; import { SvgXml } from 'react-native-svg' ; const markerRendering = `<svg xmlns="http://www.w3.org/2000/svg" width="275" meridian="200" viewBox="0 0 100 30"> <defs> <marker id="m1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="eight" markerHeight="8"> <circle cx="5" cy="5" r="5" fill="green"/> </marker> <marker id="m2" viewBox="0 0 ten 10" refX="5" refY="5" markerWidth="half-dozen.5" markerHeight="6.5"> <circle cx="5" cy="v" r="5" fill="skyblue" opacity="0.9"/> </marking> <marker id="m3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="five" markerHeight="v"> <circle cx="five" cy="5" r="five" fill up="maroon" opacity="0.85"/> </marker> </defs> <path d="M10,x h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z" make full="none" stroke="black" marker-start="url(#m1)" marking-mid="url(#m2)" marker-finish="url(#m3)" /> </svg>` ; consign default class App extends React . Component { render ( ) { render ( < View style = { styles . container } > < SvgXml xml = { markerRendering } / > < / View > ) ; } } const styles = StyleSheet . create ( { container: { backgroundColor: 'white' , justifyContent: 'eye' , alignItems: 'center' , flex: i , } , } ) ; 
import React from 'react' ; import { StyleSheet , View } from 'react-native' ; import { SvgXml } from 'react-native-svg' ; const markerRendering = `<svg xmlns="http://www.w3.org/2000/svg" width="275" height="200" viewBox="0 0 275 200"> <defs> <marker id="Triangle" viewBox="0 0 10 10" refX="one" refY="5" markerUnits="strokeWidth" markerWidth="iv" markerHeight="3" orient="car"> <path d="M 0 0 50 10 v 50 0 x z" make full="context-stroke" /> </marker> </defs> <k fill="none" stroke-width="ten" mark-end="url(#Triangle)"> <path stroke="ruby" d="M 100,75 C 125,50 150,fifty 175,75" marker-cease="url(#Triangle)"/> <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125" mark-end="url(#Triangle)"/> </1000> </svg>` ; export default class App extends React . Component { render ( ) { return ( < View fashion = { styles . container } > < SvgXml xml = { markerRendering } / > < / View > ) ; } } const styles = StyleSheet . create ( { container: { backgroundColor: 'white' , justifyContent: 'centre' , alignItems: 'center' , flex: 1 , } , } ) ; 
Code explanation: https://world wide web.w3.org/TR/SVG2/painting.html#VertexMarkerProperties
ForeignObject
SVG is designed to be uniform with other XML languages for describing and rendering other types of content. The 'foreignObject' element allows for inclusion of elements in a not-SVG namespace which is rendered inside a region of the SVG graphic using other user agent processes. The included strange graphical content is subject to SVG transformations, filters, clipping, masking and compositing.
1 goal for SVG is to provide a machinery by which other XML linguistic communication processors tin render into an surface area inside an SVG drawing, with those renderings subject to the diverse transformations and compositing parameters that are currently active at a given indicate inside the SVG content tree. 1 particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the eye of some SVG content.
https://svgwg.org/svg2-draft/embedded.html#ForeignObjectElement https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement
import React , { Component } from 'react' ; import { Text , View , Image } from 'react-native' ; import { Svg , Defs , LinearGradient , Terminate , Mask , Rect , G , Circle , ForeignObject , } from 'react-native-svg' ; export default form App extends Component { render ( ) { return ( < View style = { { flex: 1 , justifyContent: 'center' } } > < Svg height = "l%" > < Defs > < LinearGradient id = "Gradient" gradientUnits = "userSpaceOnUse" x1 = "0" y1 = "0" x2 = "800" y2 = "0" > < Stop start = "0" stopColor = "white" stopOpacity = "0.two" / > < Stop offset = "1" stopColor = "white" stopOpacity = "1" / > < / LinearGradient > < Mask id = "Mask" maskUnits = "userSpaceOnUse" x = "0" y = "0" width = "800" height = "300" > < Rect ten = "0" y = "0" width = "800" height = "300" make full = "url(#Slope)" / > < / Mask > < / Defs > < G mask = "url(#Mask)" > < Circle cx = { 50 } cy = { 70 } r = { 65 } / > < ForeignObject ten = { 50 } y = { 0 } width = { 100 } top = { 100 } > < View style = { { width: 200 , meridian: 400 , transform: [ ] } } > < Paradigm fashion = { { width: 200 , height: 200 } } source = { { uri: 'https://picsum.photos/200/200' , } } / > < / View > < / ForeignObject > < ForeignObject x = { 55 } y = { 5 } width = { 100 } tiptop = { 100 } > < View mode = { { width: 200 , height: 400 , transform: [ ] } } > < Text fashion = { { color: 'blue' } } >Testing< / Text > < Text way = { { color: 'light-green' } } >Testing2< / Text > < / View > < / ForeignObject > < / G > < / Svg > < / View > ) ; } } Touch Events
Touch events are supported in react-native-svg. These include:
-
disabled -
onPress -
onPressIn -
onPressOut -
onLongPress -
delayPressIn -
delayPressOut -
delayLongPress
You can utilise these events to provide interactivity to your react-native-svg components.
< Circle cx = "50%" cy = "50%" r = "38%" fill = "red" onPress = { ( ) => alarm ( 'Press on Circle' ) } / > 
For more examples of bear on in activeness, checkout the TouchEvents.js examples.
Serialize
import * as React from 'react' ; import { Platform , StyleSheet , TouchableOpacity } from 'react-native' ; import { Svg , Rect } from 'react-native-svg' ; import ReactDOMServer from 'react-dom/server' ; const isWeb = Platform . OS === 'web' ; const childToWeb = child => { const { blazon, props } = child ; const name = blazon && type . displayName ; const webName = name && name [ 0 ] . toLowerCase ( ) + name . slice ( 1 ) ; const Tag = webName ? webName : type ; return < Tag {...props } > { toWeb ( props . children ) } < / Tag > ; } ; const toWeb = children => React . Children . map ( children , childToWeb ) ; export default form App extends React . Component { renderSvg ( ) { render ( < Svg height = "100%" width = "100%" style = { { backgroundColor: '#33AAFF' } } > < Rect x = "fifty" y = "50" width = "l" pinnacle = "50" fill = "#3399ff" strokeWidth = "3" stroke = "rgb(0,0,0)" / > < / Svg > ) ; } serialize = ( ) => { const element = this . renderSvg ( ) ; const webJsx = isWeb ? element : toWeb ( element ) ; const svgString = ReactDOMServer . renderToStaticMarkup ( webJsx ) ; console . log ( svgString ) ; } ; render ( ) { return ( < TouchableOpacity mode = { styles . container } onPress = { this . serialize } > { this . renderSvg ( ) } < / TouchableOpacity > ) ; } } const styles = StyleSheet . create ( { container: { flex: 1 , justifyContent: 'center' , backgroundColor: '#ecf0f1' , padding: 8 , } , } ) ; Run case:
git clone https://github.com/magicismight/react-native-svg-example.git cd react-native-svg-example yarn # run Android: react-native run-android # run iOS: react-native run-ios TODO:
- Filters
Known issues:
- Unable to apply focus point of RadialGradient on Android.
Source: https://www.npmjs.com/package/react-native-svg
0 Response to "Draw a Line Inside an Svg Circle"
Post a Comment