0
# Clipping and Masking
1

2
Advanced visual effects for controlling visibility and creating complex shapes through clipping paths, masks, and markers.
3

4
## Capabilities
5

6
### ClipPath
7

8
Defines a clipping region that determines which parts of elements are visible, effectively cropping content to specific shapes.
9

10
```typescript { .api }
11
/**
12
 * Defines a clipping path for cropping elements
13
 */
14
interface ClipPathProps extends CommonPathProps {}
15

16
declare const ClipPath: React.ComponentType<ClipPathProps>;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import Svg, { Defs, ClipPath, Circle, Rect, Image, Text } from "react-native-svg";
23

24
// Circular clipping
25
<Svg width="200" height="200">
26
  <Defs>
27
    <ClipPath id="circleClip">
28
      <Circle cx="100" cy="100" r="80" />
29
    </ClipPath>
30
  </Defs>
31
  <Rect width="200" height="200" fill="lightblue" clipPath="url(#circleClip)" />
32
  <Text x="100" y="105" textAnchor="middle" fontSize="16" clipPath="url(#circleClip)">
33
    Clipped Text
34
  </Text>
35
</Svg>
36

37
// Complex shape clipping
38
<Svg width="300" height="200">
39
  <Defs>
40
    <ClipPath id="starClip">
41
      <Polygon points="150,20 170,70 220,70 185,100 200,150 150,120 100,150 115,100 80,70 130,70" />
42
    </ClipPath>
43
  </Defs>
44
  <Rect width="300" height="200" fill="linear-gradient(45deg, red, yellow)" clipPath="url(#starClip)" />
45
</Svg>
46

47
// Multiple clipping paths
48
<Svg width="400" height="200">
49
  <Defs>
50
    <ClipPath id="leftClip">
51
      <Rect x="0" y="0" width="200" height="200" />
52
    </ClipPath>
53
    <ClipPath id="rightClip">
54
      <Rect x="200" y="0" width="200" height="200" />
55
    </ClipPath>
56
  </Defs>
57
  <Circle cx="200" cy="100" r="90" fill="red" clipPath="url(#leftClip)" />
58
  <Circle cx="200" cy="100" r="90" fill="blue" clipPath="url(#rightClip)" />
59
</Svg>
60
```
61

62
### Mask
63

64
Creates alpha masks that control the opacity of elements, allowing for soft edges and transparency effects.
65

66
```typescript { .api }
67
/**
68
 * Defines a mask for controlling element opacity
69
 * @param x - X coordinate of mask region
70
 * @param y - Y coordinate of mask region
71
 * @param width - Width of mask region
72
 * @param height - Height of mask region
73
 * @param maskUnits - Coordinate system for mask dimensions
74
 * @param maskContentUnits - Coordinate system for mask content
75
 */
76
interface MaskProps extends CommonPathProps {
77
  x?: NumberProp;
78
  y?: NumberProp;
79
  width?: NumberProp;
80
  height?: NumberProp;
81
  maskUnits?: Units;
82
  maskContentUnits?: Units;
83
}
84

85
declare const Mask: React.ComponentType<MaskProps>;
86
```
87

88
**Usage Examples:**
89

90
```typescript
91
import Svg, { Defs, Mask, Circle, Rect, LinearGradient, Stop, Text } from "react-native-svg";
92

93
// Gradient mask for fade effect
94
<Svg width="300" height="200">
95
  <Defs>
96
    <LinearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
97
      <Stop offset="0%" stopColor="white" />
98
      <Stop offset="100%" stopColor="black" />
99
    </LinearGradient>
100
    <Mask id="fadeMask">
101
      <Rect width="300" height="200" fill="url(#fadeGrad)" />
102
    </Mask>
103
  </Defs>
104
  <Rect width="300" height="200" fill="blue" mask="url(#fadeMask)" />
105
  <Text x="50" y="100" fontSize="24" fill="white" mask="url(#fadeMask)">
106
    Fading Text
107
  </Text>
108
</Svg>
109

110
// Circular mask with soft edges
111
<Svg width="200" height="200">
112
  <Defs>
113
    <RadialGradient id="softGrad" cx="50%" cy="50%" r="50%">
114
      <Stop offset="0%" stopColor="white" />
115
      <Stop offset="70%" stopColor="white" />
116
      <Stop offset="100%" stopColor="black" />
117
    </RadialGradient>
118
    <Mask id="softMask">
119
      <Circle cx="100" cy="100" r="80" fill="url(#softGrad)" />
120
    </Mask>
121
  </Defs>
122
  <Rect width="200" height="200" fill="red" mask="url(#softMask)" />
123
</Svg>
124

125
// Text-based mask
126
<Svg width="400" height="200">
127
  <Defs>
128
    <Mask id="textMask">
129
      <Rect width="400" height="200" fill="black" />
130
      <Text x="200" y="120" fontSize="48" fontWeight="bold" textAnchor="middle" fill="white">
131
        MASKED
132
      </Text>
133
    </Mask>
134
  </Defs>
135
  <Rect width="400" height="200" fill="linear-gradient(45deg, purple, pink)" mask="url(#textMask)" />
136
</Svg>
137
```
138

139
### Marker
140

141
Defines markers that can be placed at the start, middle, or end of paths and lines, commonly used for arrowheads and decorations.
142

143
```typescript { .api }
144
/**
145
 * Defines a marker for path endpoints and vertices
146
 * @param refX - X coordinate of marker reference point
147
 * @param refY - Y coordinate of marker reference point
148
 * @param markerWidth - Width of marker viewport
149
 * @param markerHeight - Height of marker viewport
150
 * @param markerUnits - Units for marker dimensions
151
 * @param orient - Orientation of marker ('auto' | angle)
152
 * @param viewBox - Viewport for marker content
153
 * @param preserveAspectRatio - How to scale marker content
154
 */
155
interface MarkerProps extends CommonPathProps {
156
  refX?: NumberProp;
157
  refY?: NumberProp;
158
  markerWidth?: NumberProp;
159
  markerHeight?: NumberProp;
160
  markerUnits?: 'strokeWidth' | 'userSpaceOnUse';
161
  orient?: string | 'auto' | 'auto-start-reverse';
162
  viewBox?: string;
163
  preserveAspectRatio?: string;
164
}
165

166
declare const Marker: React.ComponentType<MarkerProps>;
167
```
168

169
**Usage Examples:**
170

171
```typescript
172
import Svg, { Defs, Marker, Path, Line, Polygon, Polyline } from "react-native-svg";
173

174
// Arrowhead markers
175
<Svg width="300" height="200">
176
  <Defs>
177
    <Marker
178
      id="arrowhead"
179
      markerWidth="10"
180
      markerHeight="7"
181
      refX="9"
182
      refY="3.5"
183
      orient="auto"
184
    >
185
      <Polygon points="0 0, 10 3.5, 0 7" fill="black" />
186
    </Marker>
187
  </Defs>
188
  
189
  <Line
190
    x1="50"
191
    y1="50"
192
    x2="200"
193
    y2="50"
194
    stroke="black"
195
    strokeWidth="2"
196
    markerEnd="url(#arrowhead)"
197
  />
198
  <Line
199
    x1="50"
200
    y1="100"
201
    x2="200"
202
    y2="150"
203
    stroke="red"
204
    strokeWidth="3"
205
    markerEnd="url(#arrowhead)"
206
  />
207
</Svg>
208

209
// Custom markers for different positions
210
<Svg width="400" height="200">
211
  <Defs>
212
    <Marker
213
      id="startMarker"
214
      markerWidth="8"
215
      markerHeight="8"
216
      refX="4"
217
      refY="4"
218
      orient="auto"
219
    >
220
      <Circle cx="4" cy="4" r="3" fill="green" />
221
    </Marker>
222
    
223
    <Marker
224
      id="midMarker"
225
      markerWidth="6"
226
      markerHeight="6"
227
      refX="3"
228
      refY="3"
229
      orient="auto"
230
    >
231
      <Rect x="1" y="1" width="4" height="4" fill="blue" />
232
    </Marker>
233
    
234
    <Marker
235
      id="endMarker"
236
      markerWidth="10"
237
      markerHeight="7"
238
      refX="9"
239
      refY="3.5"
240
      orient="auto"
241
    >
242
      <Polygon points="0 0, 10 3.5, 0 7" fill="red" />
243
    </Marker>
244
  </Defs>
245
  
246
  <Polyline
247
    points="50,100 150,50 250,100 350,50"
248
    fill="none"
249
    stroke="black"
250
    strokeWidth="2"
251
    markerStart="url(#startMarker)"
252
    markerMid="url(#midMarker)"
253
    markerEnd="url(#endMarker)"
254
  />
255
</Svg>
256

257
// Decorative markers
258
<Svg width="300" height="200">
259
  <Defs>
260
    <Marker
261
      id="flower"
262
      markerWidth="12"
263
      markerHeight="12"
264
      refX="6"
265
      refY="6"
266
      orient="auto"
267
    >
268
      <Circle cx="6" cy="6" r="5" fill="pink" stroke="red" strokeWidth="1" />
269
      <Circle cx="6" cy="6" r="2" fill="yellow" />
270
    </Marker>
271
  </Defs>
272
  
273
  <Path
274
    d="M 50 150 Q 150 50 250 150"
275
    fill="none"
276
    stroke="green"
277
    strokeWidth="3"
278
    markerStart="url(#flower)"
279
    markerMid="url(#flower)"
280
    markerEnd="url(#flower)"
281
  />
282
</Svg>
283
```
284

285
## Advanced Clipping and Masking Techniques
286

287
### Animated Clipping
288

289
```typescript
290
// Animated reveal effect
291
<Svg width="300" height="200">
292
  <Defs>
293
    <ClipPath id="animatedClip">
294
      <Rect x="0" y="0" width="0" height="200">
295
        <Animate attributeName="width" values="0;300;0" dur="4s" repeatCount="indefinite" />
296
      </Rect>
297
    </ClipPath>
298
  </Defs>
299
  <Text x="150" y="100" textAnchor="middle" fontSize="24" clipPath="url(#animatedClip)">
300
    Animated Reveal
301
  </Text>
302
</Svg>
303
```
304

305
### Nested Clipping
306

307
```typescript
308
// Multiple levels of clipping
309
<Svg width="300" height="300">
310
  <Defs>
311
    <ClipPath id="outerClip">
312
      <Circle cx="150" cy="150" r="120" />
313
    </ClipPath>
314
    <ClipPath id="innerClip">
315
      <Rect x="50" y="50" width="200" height="200" />
316
    </ClipPath>
317
  </Defs>
318
  
319
  <G clipPath="url(#outerClip)">
320
    <Rect width="300" height="300" fill="lightblue" clipPath="url(#innerClip)" />
321
  </G>
322
</Svg>
323
```
324

325
### Complex Mask Compositions
326

327
```typescript
328
// Combining multiple masks
329
<Svg width="400" height="300">
330
  <Defs>
331
    <Mask id="compositeMask">
332
      <Rect width="400" height="300" fill="white" />
333
      <Circle cx="100" cy="150" r="60" fill="black" />
334
      <Circle cx="300" cy="150" r="60" fill="black" />
335
    </Mask>
336
  </Defs>
337
  
338
  <Rect width="400" height="300" fill="purple" mask="url(#compositeMask)" />
339
</Svg>
340
```
341

342
## Performance Considerations
343

344
### Efficient Clipping
345

346
```typescript
347
// Use simple shapes for better performance
348
<ClipPath id="simpleClip">
349
  <Rect x="0" y="0" width="100" height="100" />
350
</ClipPath>
351

352
// Avoid overly complex paths in clipping
353
<ClipPath id="efficientClip">
354
  <Circle cx="50" cy="50" r="40" />
355
</ClipPath>
356
```
357

358
### Reusable Definitions
359

360
```typescript
361
// Define once, use multiple times
362
<Defs>
363
  <ClipPath id="standardClip">
364
    <Circle cx="50" cy="50" r="45" />
365
  </ClipPath>
366
</Defs>
367

368
<Rect x="0" y="0" width="100" height="100" fill="red" clipPath="url(#standardClip)" />
369
<Rect x="100" y="0" width="100" height="100" fill="blue" clipPath="url(#standardClip)" />
370
```