html - 如何在使用图像映射创建的特定区域添加图钉

Question

我有一个 Angular 应用程序，我在其中使用 HTML usemap 创建了一个图像映射

代码:

    <img src="../../assets/floor2.jpg" usemap="#floor2Map">    
        <map name="floor2Map">
            <area shape="poly" coords="210,340,216,234,312,236,323,323,317,346" matTooltip="Info about the Device" >
            <div id='pin-1' class="box" >
            <div class="pin-text">
                <h4>My Device</h3>
             </div>
        </div>
        </map>


In CSS file

.box:hover > .pin-text {
    display: block;
  }

  .box {
    width:8%;
    height:8%;
    background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

  .pin-text {
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left:75%;
    white-space:nowrap;
    display: none;
  }

我想在图像的这个特定区域添加一个图钉，当我将鼠标悬停在它上面时，工具提示就会出现。怎么做？目前我的 svg 图标在图像下方。
svg 供引用 - http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg

Answer 1

.box {
    top : 260px ;
    left : 210px;
    width:8%;
    height:8%;
    background-image:   url('http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; 
  }

添加顶部和左侧定位已解决问题