Powered by MathJax

Draw an arc with MathJax


The ability to draw a curved line over two or three letters to represent a geometric arc is surprisingly difficult to do in MathJax.  Here are several ways to do it, both directly and by editing the SVG code.

A line segment may easily be represented using the \\overline command.  An arc may be drawn over two letters via \\overset{\\huge\\frown}{\\rm{BC}}, and the frown character may be lowered to an extent via \\overset{\\lower 8pt\\huge\\frown}{\\rm{BC}}.  But for three letters, it falls a little short.  \\overparen is another possibility, and does stretch to include multiple letters; but it does not look like what I picture an arc to be, and it does not mix well with line segments.

\( \overline{\rm{BC}} ~~ \overset{\huge\frown}{\rm{BC}} ~~ \overset{\lower 8pt\huge\frown}{\rm{BC}} ~~ \overset{\lower 8pt\huge\frown}{\rm{BCD}} ~~ \overparen{\rm{BC}} ~~ \overparen{\rm{BCD}} \)


Using the MathJax editor, the SVG code for the unlowered arc image above may be obtained:


First, we will edit the transformation for the arc, near the bottom of the code.  Using separate x and y scale factors (1.464, 1) flattens it out.  Reducing the y translation value lowers it.

transform="translate(0,726.4) scale(1.464)"
transform="translate(0,706.4) scale(1.464, 1)"

This may be good enough for some purposes.  But moving the arc down does not change the overall height of the image, leaving unused space at the top.  To fix this, the svg height and viewBox must be edited (near the top of the code above).  The latter defines the internal coordinate system of the image, and consists of x, y, width, and height.  Begin by increasing y (the second number) by a value which we shall call dy; this moves the image up.  Increase it so that the space above the image is 1-2× the thickness of the arc.  Then decrease the height value h (the fourth number) by dy, to compensate.  Finally, scale the svg height by the new viewBox height over the old (h - dy)/h.  Below, dy was 220:

height="3.202ex" role="img" focusable="false" viewBox="0 -1394.3 1463.7 1415.3"
height="2.704ex" role="img" focusable="false" viewBox="0 -1174.3 1463.7 1195.3"


For three letters, the arc may be transformed to fit:

transform="translate(365.1,726.4) scale(1.464)"
transform="translate(-30,706.4) scale(2.196, 1)"


The SVG code may be included in a web page inline, or it may be saved as an image file.

If scaling is applied to the MathJax SVG output via the configuration code, the plain SVG code may be scaled to fit.  First, translate it vertically by half the scale difference, then scale it like the rest.  For example, if MathJax is configured as

svg: { scale: 0.9 }

change the svg style to

style="vertical-align: -0.048ex; transform: translate(0, 5%) scale(0.9)"


Please visit russellcottrell.com | blog