react-native-svg: Text translating/rendering x/y incorrectly when rotate > 0 from release 5.0.2+
Using react-native-svg 4.6.1:

Using react-native-svg 5.0.2:

Both using react-native 0.40.0.
Using this code snippet:
export default class rnsvgtest extends Component {
render() {
return (
<View style={styles.container}>
<ReactText style={styles.welcome}>
react-native-svg testing
</ReactText>
<Svg
height="300"
width="300"
>
<Text
fontSize="10"
x="100"
y="20"
rotate="45"
textAnchor="middle"
>[100,20]</Text>
<Text
fontSize="10"
x="150"
y="20"
rotate="45"
textAnchor="middle"
>[150,20]</Text>
<Text
fontSize="10"
x="200"
y="20"
rotate="0"
textAnchor="middle"
>[200,20]</Text>
<Text
fontSize="10"
x="250"
y="20"
rotate="0"
textAnchor="middle"
>[250,20]</Text>
</Svg>
</View>
);
}
}
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 9
- Comments: 58 (11 by maintainers)
Commits related to this issue
- support rotations around defined points This PR uses optional `cx` and `cy` props from `rotate` to change the origin of a transformation when given. Should fix https://github.com/react-native-communi... — committed to boygirl/react-native-svg by boygirl 7 years ago
- support rotations around defined points (#502) This PR uses optional `cx` and `cy` props from `rotate` to change the origin of a transformation when given. Should fix https://github.com/react-native-... — committed to software-mansion/react-native-svg by boygirl 7 years ago
- support rotations around defined points (#502) This PR uses optional `cx` and `cy` props from `rotate` to change the origin of a transformation when given. Should fix https://github.com/react-native-... — committed to JackWillie/react-native-svg by JackWillie 7 years ago
@msand Yes, the new parser works correctly for me with rotations in the form
rotate(angle, x, y)🎉Phew, okay thanks! I thought I was going nuts. I’ll use an explicit matrix transform for now. Thanks!
@msand
newprojectworked for me: