SVG：使用路径元素创建带有“孔”的区域

我正在尝试使用 SVG 路径元素来定义带有“孔”的区域。我想使用这些区域来突出显示图像中的某些文本单词。

我的目标是展示使用 OCR 从图像中提取文本的结果（谷歌云视觉API https://cloud.google.com/vision/）。结果将以表格的形式显示在我的 Angular 应用程序中，其中包含提取文本中的单词，并且能够突出显示/显示用户图像中选定的单词。

使用 OCR，我获得了提取文​​本中每个单词的边界框。

这就是我解决突出显示的方法：

<svg height="300" width="300">
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" x="0" y="0" height="300" width="300"/>
  <path fill="#ddd" opacity="0.7" fill-rule="evenodd" d="M0 0 H300 V300 H0 Z M10 10 H100 V100 H10 Z" style="visibility:visible"/>
  <path fill="#ddd" opacity="0.7" fill-rule="evenodd" d="M0 0 H300 V300 H0 Z M150 150 H200 V200 H150 Z" style="visibility:hidden"/>
</svg>

一切正常。我只遇到重叠边界框的问题。我有一个实用程序，可以将图像宽度和高度以及边界框转换为路径元素的“d”属性。

public static String example(int width, int height, List<Box> boxes) {

    StringBuilder sb = new StringBuilder("M0 0")
            .append(" H").append(width)
            .append(" V").append(height)
            .append(" H0 Z");

    boxes.forEach((box) -> {
        sb.append(" M").append(box.getLeft())
                .append(" ").append(box.getTop())
                .append(" H").append(box.getRight())
                .append(" V").append(box.getBottom())
                .append(" H").append(box.getLeft())
                .append(" Z");
    });

    return sb.toString();
}

但如果盒子重叠，我会得到这样的结果

<svg height="200" width="200">
  <path fill="red" fill-rule="evenodd" d="M0 0 H200 V200 H0 Z M40 40 H100 V100 H40 Z M10 10 H50 V50 H10 Z" />
</svg>

我想要这个

我的问题是是否有更好的方法来定义 SVG 路径元素以获得我想要的结果。

用这样的面膜...

路径形成洞。

<svg height="200" width="200">
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" height="200" width="200"/>
  <path fill="black" opacity="0.5" fill-rule="evenodd" d="M0 0 H200 V200 H0 Z M50 50 H100 V100 H50 Z M80 80 H150 V150 H80 Z" />
</svg>

<br>

<svg width="200" height="200">
  <defs>
    <mask id="Mask" maskContentUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="white" opacity="0.5"/>
      <path d="M50 50 H100 V100 H50 Z M80 80 H150 V150 H80 Z" />
    </mask>
  </defs>
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" height="200" width="200"/>
  <rect width="200" height="200" mask="url(#Mask)" />
</svg>