SVG 不绘制图形答案

【问题标题】：SVG does not draw figureSVG 不绘制图形
【发布时间】：2019-07-25 11:20:08
【问题描述】：

我正在尝试在 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>

不返回任何错误

【问题讨论】：

与 viewBox 相比，您的路径确实很大。大概是图像的一小部分未绘制在您使用这样的视图框查看时
星号标记的数字是您更改的数字吗？原来是 6 个？

标签： javascript jquery html svg geojson

【解决方案1】：

您遇到了一个数值精度问题。

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

64.77013751864433 (double) ==> 64.770134 (float)

但价值稍大

64.77013851864433 (double) ==> 64.77014 (float)

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

解决方法是增加地图坐标的大小，这样您的坐标就不会处于浮点精度的极限。

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

&lt;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"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;

【讨论】：