Implementation of new nested SVGs and Tick Labels for Interactive Gra…

…ph to solve Safari rendering issues. (#1452)

## Screenshot:
<img width="562" alt="Screenshot 2024-09-05 at 3 29 59 PM" src="https://github.com/user-attachments/assets/e78c4fb9-47ab-44f9-a29c-d57b9ae35c5c">

## Summary:
This PR introduces a new approach to solving the issues related to re-rendering Axis Ticks Labels in Safari, along with several other related issues related to SVG rendering in Safari.

We are now overriding the overflow rules from Mafs in order to allow our Axis Tick Labels to render outside the bounds of the cartesian grid. This required the addition of two nested SVG elements in order to contain the interactive figures, locked figures, and protractor within the new graph bounds. The elements are bound to the graph edges by adjusting the viewBox attribute on the nested SVGs according to the graph's range. 

While researching this issue, we were able to discover that there's a key issue with the MathJax font itself, which has required us to change the Axis Tick Labels back to using the original KaTeX font. 

Several stories were updated or added in the Interactive Graph Regression Tests in order to help protect against regressions for key issues related to off-center ranges with locked figures. 

This approach also allowed us to reintroduce the text stroke around the axis tick labels in order to improve general legibility. 

## History:
This nested SVG approach has become necessary in order to solve numerous reported issues related to the rendering of the axis tick labels when using earlier versions of Safari (14-16). Unfortunately, Safari has many long standing bugs related to re-rendering SVGs, particularly when dealing with absolutely positioned elements or more modern features. 

Issue: LEMS-2035

## Test plan:
- **_Significant_** manual testing using new Interactive Graph Regression Tests in Storybook
- Several rounds of Play testing 
- Manually testing in Webapp on a ZND

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, nicolecomputer, #perseus, mark-fitzgerald

Required Reviewers:

Approved By: nicolecomputer

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ⌛ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1452

.changeset/wet-students-float.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Implementation of SVG-based Axis Tick Labels for Interactive Graph

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-arrows.tsx

@@ -10,12 +10,22 @@ export default function AxisArrows() {
 
     const axisColor = "var(--mafs-fg)";
 
+    // Only render the arrows if the axis is within the visible range
+    // as otherwise the arrows will be rendered outside the graph
     return (
         <>
-            <Arrowhead color={axisColor} tip={[xMin, 0]} angle={180} />
-            <Arrowhead color={axisColor} tip={[xMax, 0]} angle={0} />
-            <Arrowhead color={axisColor} tip={[0, yMin]} angle={90} />
-            <Arrowhead color={axisColor} tip={[0, yMax]} angle={270} />
+            {!(yMin > 0 || yMax < 0) && (
+                <>
+                    <Arrowhead color={axisColor} tip={[xMin, 0]} angle={180} />
+                    <Arrowhead color={axisColor} tip={[xMax, 0]} angle={0} />
+                </>
+            )}
+            {!(xMin > 0 || xMax < 0) && (
+                <>
+                    <Arrowhead color={axisColor} tip={[0, yMin]} angle={90} />
+                    <Arrowhead color={axisColor} tip={[0, yMax]} angle={270} />
+                </>
+            )}
         </>
     );
 }