react-native-svg
react-native-svg copied to clipboard
feat: add textLength prop to TextPath TSpan
trafficstars
Summary
Motivation: We want to add that feature. Closes #1767
example with TextPath component
Test Plan
The example is available in the test-examples app as Test1693
What are the steps to reproduce (after prerequisites)?
Compatibility
| OS | Implemented |
|---|---|
| iOS | ✅ |
| Android | ✅ |
| Web | ✅ |
| MacOS | ✅ |
Great, but it still doesn't seem to work on either Text or TextPath
<Svg viewBox="0 0 200 200">
<Path d="M 50, 100 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0 Z" fill="red"/>
<Path d="M 50, 100 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0 Z" fill="red" id="path"/>
<Text fill="blue" textLength="314">
<TextPath href="#path">
We go up and down,
<TSpan fill="green">
then up again
</TSpan>
</TextPath>
</Text>
</Svg>
In the example above it only works when textLength is set on TSpan
EDIT: It doesn't matter if textLength is set to Text or TextPath.