toSVGString(id, contentBox = {}) {
    var {
      x1: cx,
      y1: cy,
      x2,
      y2,
      x3,
      y3,
      spreadMethod,
      radialType,
    } = this.json;

    const newX1 = cx.toPx(contentBox.width);
    const newY1 = cy.toPx(contentBox.height);
    const newX2 = x2.toPx(contentBox.width);
    const newY2 = y2.toPx(contentBox.height);

    // const ratio = contentBox.height / contentBox.width;

    var dist = vec3.dist(
      [newX1.value, newY1.value, 0],
      [newX2.value, newY2.value, 0]
    );

    var angle = this.getGradientAngle(contentBox);

    const view = mat3.create();

    mat3.multiply(
      view,
      view,
      mat3.fromTranslation([], [newX1.value, newY1.value])
    );
    mat3.multiply(view, view, mat3.fromRotation([], degreeToRadian(angle)));

    if (radialType === RadialGradientType.ELLIPSE) {
      const newX3 = x3.toPx(contentBox.width);
      const newY3 = y3.toPx(contentBox.height);
      var dist2 = vec3.dist(
        [newX1.value, newY1.value, 0],
        [newX3.value, newY3.value, 0]
      );
      mat3.multiply(view, view, mat3.fromScaling([], [1, dist2 / dist]));
    }

    const gradientTransform = `matrix(${view[0]}, ${view[1]}, ${view[3]}, ${view[4]}, ${view[6]}, ${view[7]})`;

    return /*html*/ `
<radialGradient ${OBJECT_TO_PROPERTY({
      id,
      cx: 0,
      cy: 0,
      r: dist,
      spreadMethod,
      gradientUnits: "userSpaceOnUse",
      gradientTransform,
    })} >
    ${SVGRadialGradient.makeColorStepList(this.colorsteps)
      .map(
        (it) => /*html*/ `
      <stop offset="${it.percent}%" stop-color="${it.color}"/>
    `
      )
      .join("")}
</radialGradient>
`;
  }
@param {string} id
@param {ContentBox} contentBox
@returns