简体   繁体   中英

Why can't I see the polygon drawn in this svg and how can I make it visible?

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.

它在Codepen中的外观

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.

It appears that svgs have precision limitations: "Using single-precision floats, SVG viewers are not expected to correctly draw differences between two values finer than 1/4,000,000 of the larger number (that's 1 over 2 to the power of 22, approximately). In practice, very few achieve even that."

source: https://oreillymedia.github.io/Using_SVG/extras/ch08-precision.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM