图像上的 svg 多边形顶部

Question

我需要在页脚中添加图像并在图像上绘制多边形，我尝试使用 z-index 值但无法将其放在顶部。

我的代码示例：

body {
 display: flex;
 flex-direction: column;
 height: 100vh;
}


footer {
 position: fixed;
    top: 180px;
 bottom: 0;
 width: 100%;
}

footer img[usemap] {
 height: auto;
 max-width: 100%;
 width: 100%;
}

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:#CECECE;opacity:0.9;stroke:#000000;stroke-width:2;position:absolute;top:0px;left:0px;z-index:500;pointer-events: none'" />
  Sorry, your browser does not support inline SVG.
</svg>    
</div>
<footer class="footer">
    <img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg" alt="" usemap="#Map" name="#Map" id="map" style='z-index: -1'/>
    <map name="Map" id="Map">
    </map>
</footer>

Answer 1

我不太确定你想在这里实现什么，但如果你想让多边形出现在图像上方，你必须将 position 和 z-index <svg> 标签中的样式属性。

这有帮助吗？

body {
 display: flex;
 flex-direction: column;
 height: 100vh;
}


footer {
 position: fixed;
    top: 180px;
 bottom: 0;
 width: 100%;
}

footer img[usemap] {
 height: auto;
 max-width: 100%;
 width: 100%;
}

<svg height="250" width="500" style="position:relative;z-index:500;pointer-events:none;">
  <polygon points="220,10 300,210 170,250 123,234" fill="#CECECE" opacity="0.9" stroke="#000000" stroke-width="2" />
  Sorry, your browser does not support inline SVG.
</svg>    
</div>
<footer class="footer">
    <img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg" alt="" usemap="#Map" name="#Map" id="map" style='z-index: -1'/>
    <map name="Map" id="Map">
    </map>
</footer>

图像上的 svg 多边形顶部

svg polygon top on the image

svg

polygon

footer