Draw an Arc with 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:

<svg style="vertical-align: -0.048ex;" xmlns="http://www.w3.org/2000/svg" width="3.312ex" height="3.202ex" role="img" focusable="false" viewBox="0 -1394.3 1463.7 1415.3" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"><defs><path id="MJX-16-TEX-N-42" d="M131 622Q124 629 120 631T104 634T61 637H28V683H229H267H346Q423 683 459 678T531 651Q574 627 599 590T624 512Q624 461 583 419T476 360L466 357Q539 348 595 302T651 187Q651 119 600 67T469 3Q456 1 242 0H28V46H61Q103 47 112 49T131 61V622ZM511 513Q511 560 485 594T416 636Q415 636 403 636T371 636T333 637Q266 637 251 636T232 628Q229 624 229 499V374H312L396 375L406 377Q410 378 417 380T442 393T474 417T499 456T511 513ZM537 188Q537 239 509 282T430 336L329 337H229V200V116Q229 57 234 52Q240 47 334 47H383Q425 47 443 53Q486 67 511 104T537 188Z"></path><path id="MJX-16-TEX-N-43" d="M56 342Q56 428 89 500T174 615T283 681T391 705Q394 705 400 705T408 704Q499 704 569 636L582 624L612 663Q639 700 643 704Q644 704 647 704T653 705H657Q660 705 666 699V419L660 413H626Q620 419 619 430Q610 512 571 572T476 651Q457 658 426 658Q322 658 252 588Q173 509 173 342Q173 221 211 151Q232 111 263 84T328 45T384 29T428 24Q517 24 571 93T626 244Q626 251 632 257H660L666 251V236Q661 133 590 56T403 -21Q262 -21 159 83T56 342Z"></path><path id="MJX-16-TEX-N-2322" d="M55 141Q55 149 72 174T125 234T209 303T329 360T478 388H526Q649 383 765 319Q814 291 858 250T923 179T944 141Q944 133 938 128T924 122Q914 124 912 125T902 139Q766 328 500 328Q415 328 342 308T225 258T150 199T102 148T84 124Q81 122 75 122Q55 127 55 141Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mover"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD" transform="translate(16.9,0)"><g data-mml-node="mi"><use data-c="42" xlink:href="#MJX-16-TEX-N-42"></use></g><g data-mml-node="mi" transform="translate(708,0)"><use data-c="43" xlink:href="#MJX-16-TEX-N-43"></use></g></g><g data-mml-node="mstyle" transform="translate(0,726.4) scale(1.464)"><g data-mml-node="mo"><use data-c="2322" xlink:href="#MJX-16-TEX-N-2322"></use></g></g></g></g></g></svg>

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