Implementation of new nested SVGs and Tick Labels for Interactive Graph to solve Safari rendering issues.

.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} />
+                </>
+            )}
         </>
     );
 }