Attach (recommended) or Link to PDF file here:
[arcs.pdf](https://github.com/mozilla/pdf.js/files/7610486/arcs.pdf)

Configuration:
- Web browser and its version: 96.0a1 (2021-11-26) (64-bit)
- Operating system and its version: Windows 10
- PDF.js version:
- Is a browser extension:

Steps to reproduce the problem:
1. Open PDF

What is the expected behavior? (add screenshot)
Arcs are drawn correctly, and can render on top of each other
![image](https://user-images.githubusercontent.com/7104454/143624981-1a45c37a-bc30-4b64-893a-684da9cdfe3b.png)

What went wrong? (add screenshot)
![image](https://user-images.githubusercontent.com/7104454/143624965-5506df08-3510-4e60-908f-d64499050660.png)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

import { searchNode } from "./som.js";
const TEMPLATE_NS_ID = NamespaceIds.template.id;
const SVG_NS = "http://www.w3.org/2000/svg";
const MAX_ATTEMPTS_FOR_LRTB_LAYOUT = 2;
const MAX_EMPTY_PAGES = 3;
const DEFAULT_TAB_INDEX = 5000;
const HEADING_PATTERN = /^H(\d+)$/;
const MIMES = new Set([
  "image/gif",
  "image/jpeg",
  "image/jpg",
  "image/pjpeg",
  "image/png",
  "image/apng",
  "image/x-png",
  "image/bmp",
  "image/x-ms-bmp",
  "image/tiff",
  "image/tif",
  "application/octet-stream",
]);
const IMAGES_HEADERS = [
  [[0x42, 0x4d], "image/bmp"],
  [[0xff, 0xd8, 0xff], "image/jpeg"],
  [[0x49, 0x49, 0x2a, 0x00], "image/tiff"],
  [[0x4d, 0x4d, 0x00, 0x2a], "image/tiff"],
  [[0x47, 0x49, 0x46, 0x38, 0x39, 0x61], "image/gif"],
  [[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], "image/png"],
];
function getBorderDims(node) {