Why does a small tweak to my SVG cause all the circles to disappear?
I have two very similar SVG files. They differ only in a small amount of vertical offset where I draw arcs. However, when I paint them with an offset of 31.9mm, they should be fine.
<?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>
But when I change the offset to 1, to 32.9, they disappear completely. At least when viewed in 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>
I have to say that I am pretty confused about this behavior. What am I doing wrong?
source to share
You are relying on the difference between 31.9 and 31.9 + 1.0e-6 to draw your arc as having the same y values, and the arc's origin will cause no arc to be drawn .
IEEE floats are not accurate enough to distinguish 32.9 + 1.0e-6 from 32.9 because delta remains absolute.
Basically, you cannot draw a full circle with one elliptical arc, you must do it with two semicircles.
source to share
Just remove e-6 from the end.
<?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.0 Z" stroke="black" fill="white" />
<path d="M 55.5625,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
<path d="M 80.962494,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
<path d="M 106.362495,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
</svg>
source to share