为什么我看不到在这个 svg 中绘制的多边形，我怎样才能让它可见？答案

【问题标题】：Why can't I see the polygon drawn in this svg and how can I make it visible?为什么我看不到在这个 svg 中绘制的多边形，我怎样才能让它可见？
【发布时间】：2019-09-12 05:00:56
【问题描述】：

背景：我让用户在 GoogleMap 上绘图，然后我将他们从中绘制的点提取出来，以制作用户可以在以后命名和引用的 svg。当这些图纸足够大时，这似乎可行，但当它们非常小时（例如小公园周围的多边形）时，我似乎遇到了问题。

你可以在这里玩这个版本：https://codepen.io/glenpierce/pen/MRqwmJ?editors=1010

当我去检查 svg 中的实际多边形时，它们似乎被放置在 viewBox 中，我认为它们应该是可见的，但我无法让它们出现。当我将 svgs 笔画设置为大于 0 的任何宽度时，笔画会完全占据整个 viewBox。我认为 svgs 是“可扩展的”。是否有一些关于非常小的十进制值或任何东西的规则？如果是这样，我在哪里可以找到相关的参考资料？

有没有办法在 vanilla JS 中缩放（或以其他方式修复）此 svg 中的多边形以使其在此 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>

注意：为了便于阅读，我已经编辑了间距。

见上面绿色三角形是如何工作的，但你可以看到我已经突出显示了在其他 svg 中不可见的矩形。

【问题讨论】：

我无法识别多边形中 x1、y1 x2、y2 点值的语法。每个值都以逗号结尾，而 X、Y 对必须用空格字符分隔
@MrJ 我尝试删除逗号，但这似乎并没有改变任何东西。我也有其他 svgs 有这样的逗号，它们确实出现了（但我会考虑在我的 JS 中删除这些逗号，因为它更难阅读，谢谢你指出这一点）
缩放 SVG 的唯一方法是在 viewBox 值中 [ posX, posY, Width , Height ];将视图框的 Width 、 Height 与 CSS Width 、 Height 进行比较以进行缩放或缩小
那你得看看preserveAspectRatio developer.mozilla.org/en-US/docs/Web/SVG/Attribute/…
是的，我知道这一点，当 svg 和/或 viewBox 太小时似乎发生了一些事情。

标签： javascript svg

【解决方案1】：

似乎 svg 有精度限制：“使用单精度浮点数，SVG 查看器不会正确绘制两个值之间的差异，其精度小于较大数字的 1/4,000,000（即 1 比 2 的 22 次方，大约）。在实践中，很少有人能做到这一点。”

来源：https://oreillymedia.github.io/Using_SVG/extras/ch08-precision.html

【讨论】：