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

Using react-native-svg 4.6.1:

image

Using react-native-svg 5.0.2:

image

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

Most upvoted comments

@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 newproject worked for me:

image