CODEWITHSUNDEEP
svg
mmachenry
mmachenry

Reputation: 1962

Why does a slight adjustment to my SVG make all the circles go away?

I have two very similar SVG files. They differ only by a small amount of vertical offset of where I'm drawing arcs. Yet when I draw them offset at 31.9mm, they should up just 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 by 1, to 32.9, they completely disappear. 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 must say I'm pretty baffled by this behavior. What am I doing wrong?

Upvotes: 3

Views: 39

Answers (2)

Chris
Chris

Reputation: 336

Just remove the 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>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123995

You are relying on the difference between 31.9 and 31.9 + 1.0e-6 to draw your arc as having identical values for y and the arc start y co-ordinate would cause no arc to be drawn.

IEEE floats lack sufficient precision to distinguish 32.9 + 1.0e-6 from 32.9 as the delta remains an absolute value.

Basically you can't really draw a complete circle using a single elliptical arc, you should do it with two half circles.

Upvotes: 3

Related Questions