search

diagrams / svg-builder

BSD 3-Clause "New" or "Revised" License
10 stars 14 forks source link

Elliptical Arc Curve #14

Closed jxv closed 1 year ago

jxv commented 2 years ago

I was following the heart example on this page and found a bug with elliptical arc curve implementation. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

Consider the following translation into code.

contents :: Element
contents = path_
  [ Stroke_ <<- "#FF0000"
  , Fill_ <<- "none"
  , D_ <<- (
         mA 10 30
      <> aA 20 20 0 0 1 50 30
      <> aA 20 20 0 0 1 90 30
      <> qA 90 60 50 90
      <> qA 10 60 10 30
      <> z
      )
  ]

Arcs don't display when a floating point representation is used for the large-arc-flag and sweep flags. This is the current output. heart_realfloat

<?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" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100">
<path fill="none" d="M 10.0000,30.0000 A 20.0000,20.0000 0.0000 0 1 50.0000 30.0000 A 20.0000,20.0000 0.0000 0 1 90.0000 30.0000 Q 90.0000,60.0000 50.0000,90.0000 Q 10.0000,60.0000 10.0000,30.0000 Z" stroke="#FF0000"/>
</svg>

This is how it should look, and this is what the PR outputs. heart_integral

<?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" height="100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path d="M 10.0000,30.0000 A 20.0000,20.0000 0.0000 0 1 50.0000 30.0000 A 20.0000,20.0000 0.0000 0 1 90.0000 30.0000 Q 90.0000,60.0000 50.0000,90.0000 Q 10.0000,60.0000 10.0000,30.0000 Z" stroke="#FF0000" fill="none"/>
</svg>

0 or 1 are acceptable values for the sweep with arc commands, a and A.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d