SVG： "穴"を持つ領域を作成するためのパス要素の使用

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パス要素をgに定義する方法私は欲しい。

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>