+
+
+ /*************************************************/
+ /* Finally, center the ticket within the browser */
+ /*************************************************/
+ function center_ticket() {
+ /* We're relying on the SVG being the full height of the
+ * viewport already, and on the aspect ratio being
+ * preserved. First, find the center of the ticket. */
+ const r = document.getElementById("ticket").getBoundingClientRect();
+ const c = r.left + (r.width / 2);
+
+ /* That's the center-line of the ticket. We want to move it to
+ * the center-line of the viewport. */
+ const vc = document.documentElement.clientWidth / 2;
+
+ /* This is how much we need to translate the SVG */
+ const delta = vc - c;
+
+ /* But before we can set the absolute left-coordinate of the
+ * SVG, we need to know where it is now. Note: without the
+ * "px" this doesn't default to pixels like CSS does. */
+ const svg = document.querySelector("svg");
+ svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
+ }
+
+ /* Re-center it when the window is resized */
+ window.addEventListener("resize", center_ticket);
+
+ /* Center it once when the page has loaded, too */
+ window.addEventListener("load", center_ticket);