SVG:使用路径元素创建具有 "holes"的区域

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>