Support for getBBox?
See original GitHub issueLoving react-native-svg - thanks so much!
I am porting some code to React-Native that I originally wrote for the browser using React.js and SVG. Everything is working great so far, but I’ve run into a problem - I need to calculate the bounding box of various SVG groups (<g> elements).
To obtain the bounding box of a <g> element in a browser, it is enough to use a ref
to get a callback with the mounted element, then invoke the SVG spec’s getBBox
method on it, e.g.:
<g ref={(el)=>{console.log(el.getBBox())}}>
<circle cx={100} cy={100} r={50}/>
<circle cx={120} cy={80} r={60}/>
</g>
As far as I can tell there isn’t currently any support for getBBox
in react-native-svg, so …
- Are there any plans to introduce this support? (if so, is there a rough timeline?)
- Is there a good alternative way to calculate the bounding box, taking into account transformations and such?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:9 (1 by maintainers)
Top Results From Across the Web
SVGGraphicsElement.getBBox() - Web APIs | MDN
The SVGGraphicsElement.getBBox() method allows us to determine the coordinates of the smallest rectangle in which the object fits.
Read more >SVGGraphicsElement API: getBBox | Can I use... Support ...
The getBBox() method returns an empty DOMRect when there is no fill (bug 1019326). • This method doesn't work for <textPath> and <tspan>...
Read more >getbbox VEX function - SideFX
Outputs the bounding box of the primitive in the given group. An empty primgroup string will include all primitives. The string supports Ad-hoc...
Read more >getBBox - Popular Blocks - Mike Bostock
You can find thousands of notebooks on Observable to help you learn and get inspired. See my notebooks on Observable. → · See...
Read more >How is the getBBox() SVGRect calculated? - Stack Overflow
SVG support in browsers is still a hit or miss, after 10 years. (Let alone SMIL... :( ). – fregante. Jun 5, 2011...
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 can also use UIManager.measure, closing now.
I added support for
onLayout
in this PR https://github.com/react-native-community/react-native-svg/pull/651