SVGファイルの統合方法は？

Question

シナリオがあり、建物の写真は背景として、建物の各上部には表示ブロックがあり、ブロック内のデータはJSによって変更することができます。 以下のようにしてみてください： まず、建物の画像（PNG形式）をSVGファイルに変換してください。 第2に、建物の表示ブロックをSVG要素として追加してください。 SVGについて学び始めたばかりです。このように実装できるかどうかはわかりません。

Answer 1

1. 特定の長方形に完全なファイルをレンダリングするSVGのspecifiationで<image>要素があります。
2. CSSまたはJavaScriptプラグインを使用して、別の要素のホバリングに依存する要素を表示または非表示にすることができます。例えば

<svg version="1.1" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    viewBox="0 0 256 256" 
 
    preserveAspectRatio="xMidYMin meet"> 
 
    <defs> 
 
    <style rel="stylesheet" type="text/css"> 
 
     .sensor { 
 
     opacity: 0; 
 
     cursor: pointer; 
 
     } 
 
     .sensor:not(:hover) + .hidden:not(:hover) { 
 
     display: none; 
 
     } 
 
     .hidden { 
 
     cursor: pointer; 
 
     } 
 
    </style> 
 
    </defs> 
 
    <image x="0" y="0" height="256" width="256" xlink:href="https://i.stack.imgur.com/o5DHd.png"/> 
 
    <rect class="sensor" x="0" y="10" height="200" width="100"/> 
 
    <g class="hidden"><text x="20" y="75">WOMAN</text></g> 
 
    <rect class="sensor" x="110" y="30" height="220" width="140"/> 
 
    <g class="hidden"><text x="130" y="100">MAN</text></g> 
 
</svg>

はスニペットを実行し、画像上にマウスポインタを移動させます。