mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
148 lines
3.8 KiB
TypeScript
148 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import {Platform} from 'react-native';
|
|
import {
|
|
Circle,
|
|
Defs,
|
|
G,
|
|
Pattern,
|
|
RadialGradient,
|
|
Rect,
|
|
Stop,
|
|
Svg,
|
|
SvgXml,
|
|
} from 'react-native-svg';
|
|
|
|
const patternXml = `
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Apply a transform on the tile -->
|
|
<pattern
|
|
id="p1"
|
|
width=".25"
|
|
height=".25"
|
|
patternTransform="rotate(20)
|
|
skewX(30)
|
|
scale(1 0.5)">
|
|
<circle cx="10" cy="10" r="10" fill="black" />
|
|
</pattern>
|
|
|
|
<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
|
|
</svg>
|
|
`;
|
|
|
|
function PatternTransformExample() {
|
|
return (
|
|
<>
|
|
<Svg height="100" width="300" viewBox="0 0 200 100">
|
|
<Pattern
|
|
id="p1"
|
|
width="0.25"
|
|
height="0.25"
|
|
patternTransform={[
|
|
{rotate: '20'},
|
|
{skewX: '30'},
|
|
{scaleX: 1},
|
|
{scaleY: 0.5},
|
|
]}>
|
|
<Circle fill="black" cx="10" cy="10" r="10" />
|
|
</Pattern>
|
|
<Pattern
|
|
id="p2"
|
|
width="0.25"
|
|
height="0.25"
|
|
patternTransform="rotate(20) skewX(30) scale(1 0.5)">
|
|
<Circle fill="black" cx="10" cy="10" r="10" />
|
|
</Pattern>
|
|
<Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
|
|
<Rect
|
|
x="10"
|
|
y="10"
|
|
width="80"
|
|
height="80"
|
|
fill="url(#p2)"
|
|
transform={[{translateX: 100}]}
|
|
/>
|
|
</Svg>
|
|
<Svg height="100" width="100" viewBox="0 0 100 100">
|
|
<Defs>
|
|
<Pattern
|
|
id="stripe"
|
|
patternUnits="userSpaceOnUse"
|
|
patternContentUnits="userSpaceOnUse"
|
|
width="8"
|
|
height="12"
|
|
patternTransform="rotate(45)">
|
|
<Rect width="4" height="8" fill="white" x="0" y="0"></Rect>
|
|
<Rect width="4" height="12" fill="black" x="4" y="0"></Rect>
|
|
</Pattern>
|
|
</Defs>
|
|
<G transform="matrix(1 0 0 -1 0 140)">
|
|
<Rect x="0" y="0" width="100" height="100" fill="url(#stripe)"></Rect>
|
|
</G>
|
|
</Svg>
|
|
{Platform.OS !== 'web' && (
|
|
<SvgXml width="100" height="100" xml={patternXml} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
PatternTransformExample.title = 'Pattern transform';
|
|
|
|
function GradientTransformExample() {
|
|
return (
|
|
<Svg height="200" width="300" viewBox="0 0 420 200">
|
|
<RadialGradient
|
|
id="gradient1"
|
|
gradientUnits="userSpaceOnUse"
|
|
cx="100"
|
|
cy="100"
|
|
r="100"
|
|
fx="100"
|
|
fy="100">
|
|
<Stop offset="0%" stopColor="darkblue" />
|
|
<Stop offset="50%" stopColor="skyblue" />
|
|
<Stop offset="100%" stopColor="darkblue" />
|
|
</RadialGradient>
|
|
<RadialGradient
|
|
id="gradient2"
|
|
gradientUnits="userSpaceOnUse"
|
|
cx="100"
|
|
cy="100"
|
|
r="100"
|
|
fx="100"
|
|
fy="100"
|
|
gradientTransform="skewX(20) translate(-35, 0)">
|
|
<Stop offset="0%" stopColor="darkblue" />
|
|
<Stop offset="50%" stopColor="skyblue" />
|
|
<Stop offset="100%" stopColor="darkblue" />
|
|
</RadialGradient>
|
|
|
|
<Rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
|
|
<Rect
|
|
x="0"
|
|
y="0"
|
|
width="200"
|
|
height="200"
|
|
fill="url(#gradient2)"
|
|
transform="translate(220)"
|
|
/>
|
|
</Svg>
|
|
);
|
|
}
|
|
GradientTransformExample.title = 'Gradient transform';
|
|
|
|
const icon = (
|
|
<Svg height="30" width="30" viewBox="0 0 100 100">
|
|
<Pattern
|
|
id="p1"
|
|
width="0.25"
|
|
height="0.25"
|
|
patternTransform="rotate(20) skewX(30) scale(1 0.5)">
|
|
<Circle fill="black" cx="10" cy="10" r="10" />
|
|
</Pattern>
|
|
<Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
|
|
</Svg>
|
|
);
|
|
const samples = [PatternTransformExample, GradientTransformExample];
|
|
|
|
export {icon, samples};
|