如何集成SVG文件？

Question

有一个场景，建筑物图片作为背景，建筑物的每一个顶部都有一个显示块，数据块中的数据可以通过JS进行更改。我可以这样做吗:首先，将建筑物图片(PNG格式)转换为SVG文件；其次，将建筑物上的显示块添加为SVG元素，我刚刚开始了解SVG，因此不知道是否可以用这种方式实现。

​

​

Answer 1

1. specifiation中有

元素将完整的文件呈现为特定的矩形。

1. 您可以使用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>

​

运行片段并将鼠标指针移到图像上。