如何整合SVG文件？

Question

有一種場景，建築物圖片作爲背景，建築物的每個頂部都有一個顯示塊，塊中的數據可以通過JS進行更改。 我可以嘗試如下方式： 首先，將建築圖片（PNG格式）轉換爲SVG文件;其次，將建築物上的顯示塊添加爲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>

運行段和過圖像移動鼠標指針。