_createQuadrilaterals() {
    if (!this.container) {
      return;
    }
    const { quadPoints } = this.data;
    if (!quadPoints) {
      return;
    }

    const [rectBlX, rectBlY, rectTrX, rectTrY] = this.data.rect.map(x =>
      Math.fround(x)
    );

    if (quadPoints.length === 8) {
      const [trX, trY, blX, blY] = quadPoints.subarray(2, 6);
      if (
        rectTrX === trX &&
        rectTrY === trY &&
        rectBlX === blX &&
        rectBlY === blY
      ) {
        // The quadpoints cover the whole annotation rectangle, so no need to
        // create a quadrilateral.
        return;
      }
    }

    const { style } = this.container;
    let svgBuffer;
    if (this.#hasBorder) {
      const { borderColor, borderWidth } = style;
      style.borderWidth = 0;
      svgBuffer = [
        "url('data:image/svg+xml;utf8,",
        `<svg xmlns="http://www.w3.org/2000/svg"`,
        ` preserveAspectRatio="none" viewBox="0 0 1 1">`,
        `<g fill="transparent" stroke="${borderColor}" stroke-width="${borderWidth}">`,
      ];
      this.container.classList.add("hasBorder");
    }

    if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("TESTING")) {
      this.container.classList.add("hasClipPath");
    }

    const width = rectTrX - rectBlX;
    const height = rectTrY - rectBlY;

    const { svgFactory } = this;
    const svg = svgFactory.createElement("svg");
    svg.classList.add("quadrilateralsContainer");
    svg.setAttribute("width", 0);
    svg.setAttribute("height", 0);
    const defs = svgFactory.createElement("defs");
    svg.append(defs);
    const clipPath = svgFactory.createElement("clipPath");
    const id = `clippath_${this.data.id}`;
    clipPath.setAttribute("id", id);
    clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
    defs.append(clipPath);

    for (let i = 2, ii = quadPoints.length; i < ii; i += 8) {
      const trX = quadPoints[i];
      const trY = quadPoints[i + 1];
      const blX = quadPoints[i + 2];
      const blY = quadPoints[i + 3];
      const rect = svgFactory.createElement("rect");
      const x = (blX - rectBlX) / width;
      const y = (rectTrY - trY) / height;
      const rectWidth = (trX - blX) / width;
      const rectHeight = (trY - blY) / height;
      rect.setAttribute("x", x);
      rect.setAttribute("y", y);
      rect.setAttribute("width", rectWidth);
      rect.setAttribute("height", rectHeight);
      clipPath.append(rect);
      svgBuffer?.push(
        `<rect vector-effect="non-scaling-stroke" x="${x}" y="${y}" width="${rectWidth}" height="${rectHeight}"/>`
      );
    }

    if (this.#hasBorder) {
      svgBuffer.push(`</g></svg>')`);
      style.backgroundImage = svgBuffer.join("");
    }

    this.container.append(svg);
    this.container.style.clipPath = `url(#${id})`;
  }
Create quadrilaterals from the annotation's quadpoints.

@private
@memberof AnnotationElement