javascript - 如何集成SVG文件？

Question

有一个场景，以建筑物图片为背景，每个建筑物的顶部都有一个显示 block ， block 中的数据可以通过JS更改。 我可以尝试下面的方法吗: 首先，将建筑图片(PNG格式)转换为SVG文件； 其次，将建筑物上的显示 block 添加为SVG元素我刚刚开始学习SVG，所以不知道是否可以通过这种方式实现。

Answer 1

1. 有 <image> SVG 规范中的元素将完整文件渲染到特定矩形中。
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="/image/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>

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