SVG：使用path元素创建一个带有“洞”的区域

Question

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

我的目标是使用OCR（Google Cloud Vision API）显示来自图像的文本提取结果。结果将以表格的形式显示在我的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路径元素以获得我想要的结果。

Answer 1

使用这样的面具......

路径形成了洞。

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