【发布时间】：2017-11-10 19:23:02
【问题描述】：
我正在尝试使用 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 路径元素以获得我想要的结果。
【问题讨论】：
-
您可以创建具有多个路径的蒙版并将蒙版应用于矩形。那时不需要填充规则（或剪辑规则）。
-
有点，我可能会在蒙版中绘制一个背景矩形，然后将孔绘制为顶部的单个路径，与您已经拥有的非常相似。
-
你的意思是this？如果我想显示多个孔，这有点复杂。路径元素的解决方案很简单，但我想解决重叠问题。
-
既然你已经中途了，我会完成它作为一个答案。
标签： svg