Absolute circular arcs seem broken
ygra opened this issue · 4 comments
Cf. paths-data-03-f
from the SVG test suite:
<?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 version="1.1" viewBox="0 0 480 360" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="480" height="360">
<g id="test-body-content">
<!-- ====================================================================== -->
<!-- Sin Wave using M, q, t, t, t, t, & z ================================ -->
<!-- ====================================================================== -->
<path id="Sin_MAAAAA" fill="none" stroke="#FF0000" d=" M 215 190 A 40 200 10 0 0 265 190 A 40 200 20 0 1 315 190 A 40 200 30 0 0 365 190 A 40 200 40 0 1 415 190 A 40 200 50 0 0 465 190 " />
<text font-family="Arial" font-size="12" x="215" y="246">M, A, A, A, A</text>
<rect x="213" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
<rect x="263" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
<rect x="313" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
<rect x="363" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
<rect x="413" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
<rect x="463" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
</g>
</svg>
This is due to the A_TO_C
transform here in drawPath
:
// Parse path data and convert to absolute coordinates
new SVGPathData(dataAttrs)
.toAbs()
// Normalize H and V to L commands - those cannot work with how we draw transformed paths otherwise
.transform(SVGPathDataTransformer.NORMALIZE_HVZ())
// Normalize S and T to Q and C commands - Rough.js has a bug with T where it expects 4 parameters instead of 2
.transform(SVGPathDataTransformer.NORMALIZE_ST())
// Convert elliptical arcs to cubic béziers - those are easier to transform
.transform(SVGPathDataTransformer.A_TO_C())
Without the last transform, the SVG snippet above is drawn correctly.
Do we really need this? The comment states that its easier to transform, though we don't transform the path ourselves (anymore?), other than applying the overall SVG transform.
Might indeed be that that is a relic from the past. Although it'd still indicate a bug in the other library, I guess?
True, this seems to be an issue with their transformation, since the path is all over the place, and not just wrongly placed or scaled.
This was part of the initial refactoring of the manual path transformation to the svg-pathdata approach.
I've gone through most of the test files and none looked different, other than this snippet, which looks better. So I've removed this transformation for now. Maybe we don't need it (anymore?).