Highcharts SVG pattern fill not putting the svg in 100%, but zoomed in and cutoff

I have the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="Artboard-5" fill="#000000"><path id="Combined-Shape" d="M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z"/></g></g></svg>

Which is like this:

And the pattern should look like this

However, in Highcharts it looks like this: (note that it seems that 2/3 of the left side of the svg are cut off)

Why is this? I’ve tried different sizes for width and height and couldn’t make it work.

const linePattern = "M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z";
  const patternOptions :PatternOptionsObject = {
    aspectRatio: 0,
    backgroundColor: "red",
    color: '#907000',
    image: "",
    opacity: 0.5,
    // path: {
    //   d: linePattern,
    //   fill: '#102045'
    // },
    patternTransform: "",
    path: {
      d: linePattern,
      stroke: "white",
      fill: "evenodd"
    },
    width: 30,
    height: 30
  }
  const patternObject : PatternObject = {
    pattern: patternOptions
  };

  if (options.series.length) {
    options.series[0].data[0].color = patternObject; // modifying the first row for testing purposes
  }