svg - 为什么对我的 SVG 稍作调整会使所有圆圈消失？

Question

我有两个非常相似的 SVG 文件。它们的区别仅在于我绘制弧线的位置有少量垂直偏移。然而，当我以 31.9 毫米的偏移量绘制它们时，它们应该很好。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="152.4mm" height="152.4mm" viewBox="0 0 152.4 152.4">
<path d="M 1,1 l 151.4,0.0 l 0.0,151.4 l -151.4,0.0 Z" stroke="black" fill="white" />
<path d="M 30.162498,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 55.5625,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 80.962494,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 106.362495,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
</svg>

但是当我将偏移量从 1 更改为 32.9 时，它们就完全消失了。至少在 Chrome 中查看时是这样。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="152.4mm" height="152.4mm" viewBox="0 0 152.4 152.4">
<path d="M 1,1 l 151.4,0.0 l 0.0,151.4 l -151.4,0.0 Z" stroke="black" fill="white" />
<path d="M 30.162498,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 55.5625,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 80.962494,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 106.362495,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
</svg>

我必须说我对这种行为感到非常困惑。我做错了什么？

Answer 1

您依靠 31.9 和 31.9 + 1.0e-6 之间的差异来绘制弧线，因为 y 值和弧线起点 y 坐标会导致 no arc to be drawn .

IEEE float 缺乏足够的精度来区分 32.9 + 1.0e-6 和 32.9，因为增量仍然是一个绝对值。

基本上你不能用一个椭圆弧真正画出一个完整的圆，你应该用两个半圆来画。