Text element wont redraw when SVG size changes
See original GitHub issueI have a Svg element with dynamic width and height, and positioning of all elements inside of it is related to this elements width and height, however, Text elements won’t change their places after width and height changes, everything else is fine. This problem occurs in 6.3.1 version of react-native-svg, in 5.5.1, it works fine.
Environment:
OS: Windows 10
Node: 8.11.2
Yarn: 1.7.0
npm: 6.1.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
View,
Button,
Alert
} from 'react-native';
import Svg, {G, Circle, Image, Text} from 'react-native-svg';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {s:400};
}
render() {
return (
<View style={styles.container}>
<View style={{borderWidth:2}}>
<Svg width={this.state.s} height={this.state.s}>
<Circle cx="50%" cy="50%" r={this.state.s/2 - 10} stroke="red" fillOpacity="0"/>
<Text x={this.state.s/2} y={this.state.s/2} textAnchor="middle" fontWeight="bold" fontSize={this.state.s/25} fill="black">HOGWARTS</Text>
</Svg>
</View>
<Button title="test" onPress={() => {this.setState((this.state.s == 400) ? {s:200}:{s:400})}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Sorry if this is duplicate, couldn’t find anything related.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:34
Top Results From Across the Web
Text element wont redraw when SVG size changes · Issue #709
I have a Svg element with dynamic width and height, and positioning of all elements ... Text element wont redraw when SVG size...
Read more >Redrawing SVG on resize - javascript - Stack Overflow
The ultimate problem is the svg element not resizing (i.e. the width and height never get updated). However I think it's related to...
Read more >Text — SVG 2
When a different font (or change in font size) is specified in the middle of a run of text, the dominant baseline determines...
Read more >SVGSVGElement - Web APIs | MDN
Chrome Edge
SVGSVGElement Full support. Chrome1. Toggle history Full support. Edge12. Toggle hist...
animationsPaused Full support. Chrome1. Toggle history Full support. Edge79. Toggle hist...
checkEnclosure Full...
Read more >Resizing an SVG When the Window is Resized in d3.js - Chartio
When developing with SVG, it can often be difficult to scale SVG objects when the containing frame or even the entire browser window...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You should use key={Math.random()} for text element.
<Text x={this.state.s/2} y={this.state.s/2} key={Math.random()} .................>HOGWARTS</Text>
@msageryd Oj glömde svara här. Varsågod, kul att underliggande orsakerna hittades o kunde åtgärdas 😃 @jgranstrom The fixes have been published under the 7th major version. If anyone of you have experienced issues with the gesture responder system, then I would recommend testing the latest commit from the master branch, as I’ve fixed several issues there recently and help in testing would be very useful! Now onPress/In/out should work and be called the correct number of times with the correct hit target.