react-native-svg/Example/examples/Clipping.js

import React, { Component } from 'react';
import {
  Svg,
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
  Marker,
} from '../Svg';

class ClipPathElement extends Component {
  static title = 'Clip by set clip-path with a path data';
  render() {
    return (
      <Svg height="100" width="100">
        <Defs>
          <RadialGradient
            id="clip-path-grad"
            cx="50%"
            cy="50%"
            rx="50%"
            ry="50%"
            fx="50%"
            fy="50%">
            <Stop offset="0%" stopColor="#ff0" stopOpacity="1" />
            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
          </RadialGradient>
          <ClipPath id="clip-path-clip">
            <Circle cx="30" cy="30" r="20" />
            <Ellipse cx="60" cy="70" rx="20" ry="10" />
            <Rect x="65" y="15" width="30" height="30" />
            <Polygon points="20,60 20,80 50,70" />
            <Text
              x="50"
              y="30"
              fontSize="32"
              fonWeight="bold"
              textAnchor="middle"
              scale="1.2">
              Q
            </Text>
          </ClipPath>
        </Defs>
        <Rect
          x="0"
          y="0"
          width="100"
          height="100"
          fill="url(#clip-path-grad)"
          clipPath="url(#clip-path-clip)"
        />
      </Svg>
    );
  }
}

class ClipRule extends Component {
  static title = 'Clip a group with clipRule="evenodd"';
  render() {
    return (
      <Svg height="100" width="100">
        <Defs>
          <ClipPath id="clip-rule-clip" clipRule="evenodd">
            <Path d="M50,5L20,99L95,39L5,39L80,99z" />
          </ClipPath>
        </Defs>
        <G clipPath="url(#clip-rule-clip)">
          <Rect x="0" y="0" width="50" height="50" fill="red" />
          <Rect x="50" y="0" width="50" height="50" fill="blue" />
          <Rect x="0" y="50" width="50" height="50" fill="yellow" />
          <Rect x="50" y="50" width="50" height="50" fill="green" />
        </G>
      </Svg>
    );
  }
}

class TextClipping extends Component {
  static title = 'Transform the text';
  render() {
    return (
      <Svg height="60" width="200">
        <Defs>
          <ClipPath id="text-clipping-clip">
            <Circle cx="-20" cy="35" r="10" />
            <Circle cx="0" cy="35" r="10" />
            <Circle cx="20" cy="35" r="10" />
            <Circle cx="40" cy="35" r="10" />
            <Circle cx="60" cy="35" r="10" />
            <Circle cx="80" cy="35" r="10" />
            <Circle cx="100" cy="35" r="10" />
            <Circle cx="120" cy="35" r="10" />
            <Circle cx="140" cy="35" r="10" />
            <Circle cx="160" cy="35" r="10" />
            <Circle cx="180" cy="35" r="10" />
          </ClipPath>
        </Defs>
        <Text
          x="100"
          y="40"
          fill="red"
          fontSize="22"
          fontWeight="bold"
          stroke="blue"
          strokeWidth="1"
          textAnchor="middle"
          clipPath="url(#text-clipping-clip)">
          NOT THE FACE
        </Text>
      </Svg>
    );
  }
}

const icon = (
  <Svg height="30" width="30" viewBox="0 0 20 20">
    <Defs>
      <ClipPath id="clipping-icon-clip">
        <Path d="M50,5L20,99L95,39L5,39L80,99z" />
      </ClipPath>
    </Defs>
    <G clipPath="url(#clipping-icon-clip)" clipRule="evenodd" scale="0.2">
      <Rect x="0" y="0" width="50" height="50" fill="red" />
      <Rect x="50" y="0" width="50" height="50" fill="blue" />
      <Rect x="0" y="50" width="50" height="50" fill="yellow" />
      <Rect x="50" y="50" width="50" height="50" fill="green" />
    </G>
  </Svg>
);

const samples = [ClipPathElement, ClipRule, TextClipping];

export { icon, samples };