SVG: using path element to create an area with "holes"

Question

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.

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.

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>

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>

and I want this

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

Answer 1

Use a mask like this...

The path forms the hole.

<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>