SVG:使用路径元素来创建具有“孔"的区域.

我正在尝试使用SVG路径元素来定义带有孔"的区域.我想使用这些区域来突出显示图像中的某些文字.

I'm trying to use SVG path element to define an area with "holes". I would like to use these areas for highlighting of some words of text in an image.

我的目标是展示使用OCR( Google Cloud Vision API href ="a>).结果将以表格的形式显示在我的Angular应用程序中，并带有提取文本中的单词，并能够突出显示/显示用户图像中的所选单词.

My goal is to present results from text extraction from an image using the OCR (Google Cloud Vision API). Results will be displayed in my Angular application in form of table with words from extracted text with ability to highlight/show selected word in an image from the user.

使用OCR，我为提取的文本的每个单词都找到了边框.

Using the OCR I got bounding box for each word of extracted text.

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

This is how I solved highlighting:

<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"属性.

Everything works fine. I have problem only with overlapping bounding boxes. I have an utility that converts image width and height and bounding boxes to the "d" attribute of path element.

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();
}

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

But if boxes overlap, I got result like this

<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路径元素以获得我想要的结果.

My question is if there is a better way how to define SVG path element to get result I want.