Background: I'm letting users draw on a GoogleMap and I'm then pulling the points they draw from it to make an svg that the users can name and reference later. This seems to be working when those drawings are large enough, but I seem to have a problem when they are very small (like a polygon around a small park for example).
You can play with a version of this here: https://codepen.io/glenpierce/pen/MRqwmJ?editors=1010
When I go to inspect the actual polygons within the svgs, they appear to be placed within the viewBox and I think they should be visible, but I can't get them to appear. When I set the svgs stroke to any width above 0, the stroke completely takes over the entire viewBox. I thought svgs were "scalable". Are there some rules about very small decimal values or anything? If so, where can I find a reference to that?
Is there a way to scale (or otherwise fix) the polygon in this svg in vanilla JS to make it visible within this svg?
<svg height="180px" width="360px" viewBox=" 92.52881560431149 43.41319404777748 0.0024139881134033203 0.00027281812062796007 "><polygon points=" 92.5290516387048, 43.41319404777748, 92.53095064268734, 43.4132456619112, 92.53122959242489, 43.413400504607246, 92.52903018103268, 43.41346686589811, 92.52881560431149, 43.4132087946678 "></polygon></svg>
note: I've edited the spacing on this to make it easier to read.
See above how this works on the triangle in green, but you can see that I have highlighted the rectangle that is not visible in the other svg.