如何使不同的剪辑路径缩放到相同的大小以剪辑/遮罩图像？

Question

我正在尝试创建一个上面有 SVG 遮罩层的图像。我有 3 个不同的 svg 路径存储在一个 js 数组中，并且基于用户图片（使用选择框）一个不同的蒙版应该出现在图像上。问题是剪辑路径的大小不尽相同。

我如何缩放它们，以便用户选择的任何蒙版/剪辑路径都可以缩放以适合整个图像？我想以编程方式执行此操作，因为最终这些路径将由用户生成，所以我不知道它们的大小。

图像将始终具有相同的大小 400px X 400px，如果缩放后的图像不占据整个高度或宽度，我希望缩放后的 svg 路径掩码在该框架中居中。

任何帮助将不胜感激。

var nomask = "M0 0 L400 0 L400 400 L0 400 L0 0 z";
var heart = "M 321.4214 178.5786 l -141.4214 141.4214 l -141.4214 -141.4214 a 100 100 315 0 1 141.4214 -141.4214 a 100 100 315 0 1 141.4214 141.4214 z";
var star = "M 22.928 118.8 l 35.12 -18.048 l 35.112 18.048 l -7.856 -46.032 l 23.328 -34.752 l -34.488 3.28 L 60.304 7.376 L 42.832 40.96 l -39.184 5.568 l 28.184 26.848 l -6.64 37.84 z";
var blob = "M215,100.3c97.8-32.6,90.5-71.9,336-77.6\
            c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1\
            c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z";

var masks = [nomask, star, blob, heart];

function changeMask(mask) {
  document.getElementById("svgPath").children[0].setAttribute('d', masks[mask]);
}

body {
  margin: 10px;
}

.imageContainer {
  margin: 5px 0;
  border: 1px solid black;
  padding: 5px;
  width: fit-content;
}

.clippingMask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

<select id="maskSelect" onchange="changeMask(this.value);">
  <option value="1">star</option>
  <option value="2">blob</option>
  <option value="3">heart</option>
  <option value="0" selected>- no mask -</option>
</select>

<div class="imageContainer">
  <img class="clippingMask" src="https://picsum.photos/400">
</div>

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10"
      d="M0 0 L400 0 L400 400 L0 400 L0 0 z" />
    </clipPath>
  </defs>
</svg>

请注意，在我的示例中，星号太小而斑点太大。

谢谢！