mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-05-31 13:52:58 +00:00
refactor: typescript
This commit is contained in:
Mikael Sand
@@ -171,8 +171,10 @@ and run `pod install` from `ios` folder
|
||||
### Troubleshooting
|
||||
|
||||
#### Problems with Proguard
|
||||
|
||||
When Proguard is enabled (which it is by default for Android release builds), it causes runtine error
|
||||
To avoid this, add an exception to `android/app/proguard-rules.pro`:
|
||||
|
||||
```bash
|
||||
-keep public class com.horcrux.svg.** {*;}
|
||||
```
|
||||
@@ -223,7 +225,7 @@ If you suspect that you've found a spec conformance bug, then you can test using
|
||||
|
||||
Here's a simple example. To render output like this:
|
||||
|
||||
|
||||
|
||||
|
||||
Use the following code:
|
||||
|
||||
@@ -464,7 +466,7 @@ Colors set in the Svg element are inherited by its children:
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -490,7 +492,7 @@ The <Rect> element is used to create a rectangle and variations of a rectangle s
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -508,7 +510,7 @@ The <Circle> element is used to create a circle:
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -535,7 +537,7 @@ An ellipse is closely related to a circle. The difference is that an ellipse has
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -554,7 +556,7 @@ The <Line> element is an SVG basic shape, used to create a line connecting two p
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -578,7 +580,7 @@ The <Polygon> element is used to create a graphic that contains at least three s
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -599,7 +601,7 @@ The <Polyline> element is used to create any shape that consists of only straigh
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Code explanation:
|
||||
|
||||
@@ -634,7 +636,7 @@ The following commands are available for path data:
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Text
|
||||
|
||||
@@ -656,7 +658,7 @@ The <Text> element is used to define text.
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### TSpan
|
||||
|
||||
@@ -689,7 +691,7 @@ The <TSpan> element is used to draw multiple lines of text in SVG. Rather than h
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### TextPath
|
||||
|
||||
@@ -714,7 +716,7 @@ In addition to text drawn in a straight line, SVG also includes the ability to p
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### G
|
||||
|
||||
@@ -734,7 +736,7 @@ The <G> element is a container used to group other SVG elements. Transformations
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Use
|
||||
|
||||
@@ -762,7 +764,7 @@ Before the <G> element can be referenced, it must have an ID set on it via its i
|
||||
|
||||
The <Use> element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the <G> element are located at 0,0. That is done because their position is added to the position specified in the <Use> element.
|
||||
|
||||
|
||||
|
||||
|
||||
#### Symbol
|
||||
|
||||
@@ -788,7 +790,7 @@ The SVG <Symbol> element is used to define reusable symbols. The shapes nested i
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Defs
|
||||
|
||||
@@ -831,7 +833,7 @@ The <Image> element allows a raster image to be included in an Svg componenet.
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### ClipPath
|
||||
|
||||
@@ -883,7 +885,7 @@ The <ClipPath> SVG element defines a clipping path. A clipping path is used/refe
|
||||
</Svg>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### LinearGradient
|
||||
|
||||
@@ -915,7 +917,7 @@ Code explanation:
|
||||
- The color range for a gradient can be composed of two or more colors. Each color is specified with a <Stop> tag. The offset prop is used to define where the gradient color begin and end
|
||||
- The fill prop links the ellipse element to the gradient
|
||||
|
||||
|
||||
|
||||
|
||||
_NOTICE:_
|
||||
LinearGradient also supports percentage as prop:
|
||||
@@ -961,7 +963,7 @@ Code explanation:
|
||||
- The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset prop is used to define where the gradient color begin and end
|
||||
- The fill prop links the ellipse element to the gradient
|
||||
|
||||
|
||||
|
||||
|
||||
#### Mask
|
||||
|
||||
@@ -1084,7 +1086,7 @@ You can use these events to provide interactivity to your react-native-svg compo
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
For more examples of touch in action, checkout the [TouchEvents.js examples](https://github.com/magicismight/react-native-svg-example/blob/master/examples/TouchEvents.js).
|
||||
|
||||
|
||||
Reference in New Issue
Block a user