react-native-svg
Version:
SVG library for react-native
68 lines (66 loc) • 1.95 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<Svg
height="160"
width="200"
>
<Text y="20" dx="5 5">
<TSpan x="10" >tspan line 1</TSpan>
<TSpan x="10" dy="15">tspan line 2</TSpan>
<TSpan x="10" dx="10" dy="15">tspan line 3</TSpan>
</Text>
<Text x="10" y="60" fill="red" font-size="14" >
<TSpan dy="5 10 20" >12345</TSpan>
<TSpan fill="blue" dy="15" dx="0 5 50" ><TSpan>6</TSpan><TSpan>7</TSpan></TSpan>
<TSpan dx="0 10 20" dy="0 20" font-weight="bold" font-size="12">89a</TSpan>
</Text>
<Text y="140" dx="0 5 5" dy="0 -5 -5">delta on text</Text>
</Svg>
<Svg
height="60"
width="200"
>
<Defs>
<clipPath id="clip">
<Circle cx="-20" cy="40" r="10"/>
<Circle cx="0" cy="40" r="10"/>
<Circle cx="20" cy="40" r="10"/>
<Circle cx="40" cy="40" r="10"/>
<Circle cx="60" cy="40" r="10"/>
<Circle cx="80" cy="40" r="10"/>
<Circle cx="100" cy="40" r="10"/>
<Circle cx="120" cy="40" r="10"/>
<Circle cx="140" cy="40" r="10"/>
<Circle cx="160" cy="40" r="10"/>
<Circle cx="180" cy="40" r="10"/>
</clipPath>
</Defs>
<Text
x="100"
y="30"
fill="red"
font-Size="22"
font-Weight="bold"
stroke="blue"
text-Anchor="middle"
clip-Path="url(#clip)"
>NOT THE FACE</Text>
<Circle cx="-20" cy="40" r="10"/>
<Circle cx="0" cy="40" r="10"/>
<Circle cx="20" cy="40" r="10"/>
<Circle cx="40" cy="40" r="10"/>
<Circle cx="60" cy="40" r="10"/>
<Circle cx="80" cy="40" r="10"/>
<Circle cx="100" cy="40" r="10"/>
<Circle cx="120" cy="40" r="10"/>
<Circle cx="140" cy="40" r="10"/>
<Circle cx="160" cy="40" r="10"/>
<Circle cx="180" cy="40" r="10"/>
</Svg>
</body>
</html>