javascript - SVG不绘制图形

Question

我试图在 svg 中绘制这个 geojson，但它不起作用。如果我将第六位小数更改为第一个坐标(值增加一)(如果它代表数字)，但这是不正确的。

什么不能很好地代表？

<svg data-bind="html: acSvgPaths, attr: { 'viewBox': svgPaths }" width="100px" height="100px" style="background: #f3f3f3; width: 100%; margin: 0.5em 0;" viewBox="64.77013751864433 67.7408375870796 0.0041484832763671875 0.004410754101002112"><path fill-rule="evenodd" style="fill:green;opacity: 0.5" d="M64.77013**7**51864433,67.74087805444512 64.7740475833416,67.7408375870796 64.7742860019207,67.74480323649146 64.77013751864433,67.7452483411806 64.77013751864433,67.74087805444512 64.77013751864433,67.74087805444512 64.77013751864433,67.74087805444512Z"></path></svg>

它不会返回任何错误

Answer 1

您遇到了数值精度问题。

大多数(如果不是全部)2D 渲染库在内部使用浮点精度。 float 的精度限制意味着值可能会发生重大变化。如果我们将原始坐标值从 double 型转换为浮点型，我们会得到:

64.77013751864433 (double) ==> 64.770134 (float)

但数值稍大

64.77013851864433 (double) ==> 64.77014 (float)

请注意，我们在这里没有考虑 viewBox 将导致的额外转换。但希望您能够看到当您考虑浮点精度的限制时，某些元素的渲染可能会受到怎样的影响。

解决方法是增加 map 坐标的大小，这样坐标就不会达到浮点精度的极限。

例如，如果我们将所有坐标乘以 100，则 SVG 渲染效果良好。

<svg data-bind="html: acSvgPaths, attr: { 'viewBox': svgPaths }" width="100px" height="100px" style="background: #f3f3f3; width: 100%; margin: 0.5em 0;" viewBox="6477.013751864433 6774.08375870796 0.41484832763671875 0.4410754101002112"><path fill-rule="evenodd" style="fill:green;opacity: 0.5" d="M6477.013751864433,6774.087805444512 6477.40475833416,6774.08375870796 6477.42860019207,6774.480323649146 6477.013751864433,6774.52483411806 6477.013751864433,6774.087805444512 6477.013751864433,6774.087805444512 6477.013751864433,6774.087805444512Z"></path></svg>