CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-svg

SVG library for React Native applications with comprehensive element support and cross-platform compatibility

—

Pending
Overview
Eval results
Files

clipping-masking.mddocs/

Clipping and Masking

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

Capabilities

ClipPath

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

/**
 * Defines a clipping path for cropping elements
 */
interface ClipPathProps extends CommonPathProps {}

declare const ClipPath: React.ComponentType<ClipPathProps>;

Usage Examples:

import Svg, { Defs, ClipPath, Circle, Rect, Image, Text } from "react-native-svg";

// Circular clipping
<Svg width="200" height="200">
  <Defs>
    <ClipPath id="circleClip">
      <Circle cx="100" cy="100" r="80" />
    </ClipPath>
  </Defs>
  <Rect width="200" height="200" fill="lightblue" clipPath="url(#circleClip)" />
  <Text x="100" y="105" textAnchor="middle" fontSize="16" clipPath="url(#circleClip)">
    Clipped Text
  </Text>
</Svg>

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

// Multiple clipping paths
<Svg width="400" height="200">
  <Defs>
    <ClipPath id="leftClip">
      <Rect x="0" y="0" width="200" height="200" />
    </ClipPath>
    <ClipPath id="rightClip">
      <Rect x="200" y="0" width="200" height="200" />
    </ClipPath>
  </Defs>
  <Circle cx="200" cy="100" r="90" fill="red" clipPath="url(#leftClip)" />
  <Circle cx="200" cy="100" r="90" fill="blue" clipPath="url(#rightClip)" />
</Svg>

Mask

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

/**
 * Defines a mask for controlling element opacity
 * @param x - X coordinate of mask region
 * @param y - Y coordinate of mask region
 * @param width - Width of mask region
 * @param height - Height of mask region
 * @param maskUnits - Coordinate system for mask dimensions
 * @param maskContentUnits - Coordinate system for mask content
 */
interface MaskProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  maskUnits?: Units;
  maskContentUnits?: Units;
}

declare const Mask: React.ComponentType<MaskProps>;

Usage Examples:

import Svg, { Defs, Mask, Circle, Rect, LinearGradient, Stop, Text } from "react-native-svg";

// Gradient mask for fade effect
<Svg width="300" height="200">
  <Defs>
    <LinearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="white" />
      <Stop offset="100%" stopColor="black" />
    </LinearGradient>
    <Mask id="fadeMask">
      <Rect width="300" height="200" fill="url(#fadeGrad)" />
    </Mask>
  </Defs>
  <Rect width="300" height="200" fill="blue" mask="url(#fadeMask)" />
  <Text x="50" y="100" fontSize="24" fill="white" mask="url(#fadeMask)">
    Fading Text
  </Text>
</Svg>

// Circular mask with soft edges
<Svg width="200" height="200">
  <Defs>
    <RadialGradient id="softGrad" cx="50%" cy="50%" r="50%">
      <Stop offset="0%" stopColor="white" />
      <Stop offset="70%" stopColor="white" />
      <Stop offset="100%" stopColor="black" />
    </RadialGradient>
    <Mask id="softMask">
      <Circle cx="100" cy="100" r="80" fill="url(#softGrad)" />
    </Mask>
  </Defs>
  <Rect width="200" height="200" fill="red" mask="url(#softMask)" />
</Svg>

// Text-based mask
<Svg width="400" height="200">
  <Defs>
    <Mask id="textMask">
      <Rect width="400" height="200" fill="black" />
      <Text x="200" y="120" fontSize="48" fontWeight="bold" textAnchor="middle" fill="white">
        MASKED
      </Text>
    </Mask>
  </Defs>
  <Rect width="400" height="200" fill="linear-gradient(45deg, purple, pink)" mask="url(#textMask)" />
</Svg>

Marker

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

/**
 * Defines a marker for path endpoints and vertices
 * @param refX - X coordinate of marker reference point
 * @param refY - Y coordinate of marker reference point
 * @param markerWidth - Width of marker viewport
 * @param markerHeight - Height of marker viewport
 * @param markerUnits - Units for marker dimensions
 * @param orient - Orientation of marker ('auto' | angle)
 * @param viewBox - Viewport for marker content
 * @param preserveAspectRatio - How to scale marker content
 */
interface MarkerProps extends CommonPathProps {
  refX?: NumberProp;
  refY?: NumberProp;
  markerWidth?: NumberProp;
  markerHeight?: NumberProp;
  markerUnits?: 'strokeWidth' | 'userSpaceOnUse';
  orient?: string | 'auto' | 'auto-start-reverse';
  viewBox?: string;
  preserveAspectRatio?: string;
}

declare const Marker: React.ComponentType<MarkerProps>;

Usage Examples:

import Svg, { Defs, Marker, Path, Line, Polygon, Polyline } from "react-native-svg";

// Arrowhead markers
<Svg width="300" height="200">
  <Defs>
    <Marker
      id="arrowhead"
      markerWidth="10"
      markerHeight="7"
      refX="9"
      refY="3.5"
      orient="auto"
    >
      <Polygon points="0 0, 10 3.5, 0 7" fill="black" />
    </Marker>
  </Defs>
  
  <Line
    x1="50"
    y1="50"
    x2="200"
    y2="50"
    stroke="black"
    strokeWidth="2"
    markerEnd="url(#arrowhead)"
  />
  <Line
    x1="50"
    y1="100"
    x2="200"
    y2="150"
    stroke="red"
    strokeWidth="3"
    markerEnd="url(#arrowhead)"
  />
</Svg>

// Custom markers for different positions
<Svg width="400" height="200">
  <Defs>
    <Marker
      id="startMarker"
      markerWidth="8"
      markerHeight="8"
      refX="4"
      refY="4"
      orient="auto"
    >
      <Circle cx="4" cy="4" r="3" fill="green" />
    </Marker>
    
    <Marker
      id="midMarker"
      markerWidth="6"
      markerHeight="6"
      refX="3"
      refY="3"
      orient="auto"
    >
      <Rect x="1" y="1" width="4" height="4" fill="blue" />
    </Marker>
    
    <Marker
      id="endMarker"
      markerWidth="10"
      markerHeight="7"
      refX="9"
      refY="3.5"
      orient="auto"
    >
      <Polygon points="0 0, 10 3.5, 0 7" fill="red" />
    </Marker>
  </Defs>
  
  <Polyline
    points="50,100 150,50 250,100 350,50"
    fill="none"
    stroke="black"
    strokeWidth="2"
    markerStart="url(#startMarker)"
    markerMid="url(#midMarker)"
    markerEnd="url(#endMarker)"
  />
</Svg>

// Decorative markers
<Svg width="300" height="200">
  <Defs>
    <Marker
      id="flower"
      markerWidth="12"
      markerHeight="12"
      refX="6"
      refY="6"
      orient="auto"
    >
      <Circle cx="6" cy="6" r="5" fill="pink" stroke="red" strokeWidth="1" />
      <Circle cx="6" cy="6" r="2" fill="yellow" />
    </Marker>
  </Defs>
  
  <Path
    d="M 50 150 Q 150 50 250 150"
    fill="none"
    stroke="green"
    strokeWidth="3"
    markerStart="url(#flower)"
    markerMid="url(#flower)"
    markerEnd="url(#flower)"
  />
</Svg>

Advanced Clipping and Masking Techniques

Animated Clipping

// Animated reveal effect
<Svg width="300" height="200">
  <Defs>
    <ClipPath id="animatedClip">
      <Rect x="0" y="0" width="0" height="200">
        <Animate attributeName="width" values="0;300;0" dur="4s" repeatCount="indefinite" />
      </Rect>
    </ClipPath>
  </Defs>
  <Text x="150" y="100" textAnchor="middle" fontSize="24" clipPath="url(#animatedClip)">
    Animated Reveal
  </Text>
</Svg>

Nested Clipping

// Multiple levels of clipping
<Svg width="300" height="300">
  <Defs>
    <ClipPath id="outerClip">
      <Circle cx="150" cy="150" r="120" />
    </ClipPath>
    <ClipPath id="innerClip">
      <Rect x="50" y="50" width="200" height="200" />
    </ClipPath>
  </Defs>
  
  <G clipPath="url(#outerClip)">
    <Rect width="300" height="300" fill="lightblue" clipPath="url(#innerClip)" />
  </G>
</Svg>

Complex Mask Compositions

// Combining multiple masks
<Svg width="400" height="300">
  <Defs>
    <Mask id="compositeMask">
      <Rect width="400" height="300" fill="white" />
      <Circle cx="100" cy="150" r="60" fill="black" />
      <Circle cx="300" cy="150" r="60" fill="black" />
    </Mask>
  </Defs>
  
  <Rect width="400" height="300" fill="purple" mask="url(#compositeMask)" />
</Svg>

Performance Considerations

Efficient Clipping

// Use simple shapes for better performance
<ClipPath id="simpleClip">
  <Rect x="0" y="0" width="100" height="100" />
</ClipPath>

// Avoid overly complex paths in clipping
<ClipPath id="efficientClip">
  <Circle cx="50" cy="50" r="40" />
</ClipPath>

Reusable Definitions

// Define once, use multiple times
<Defs>
  <ClipPath id="standardClip">
    <Circle cx="50" cy="50" r="45" />
  </ClipPath>
</Defs>

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

Install with Tessl CLI

npx tessl i tessl/npm-react-native-svg

docs

basic-shapes.md

clipping-masking.md

container-elements.md

filter-effects.md

gradients-patterns.md

index.md

paths-complex-shapes.md

text-elements.md

xml-processing.md

tile.json