圖像上的svg多邊形頂部

Question

我需要在頁腳和圖像繪製多邊形中添加圖像，我嘗試使用z-index值，但無法將其置於頂部。

我的代碼示例：

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

 

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

 
footer img[usemap] { 
 
\t height: auto; 
 
\t max-width: 100%; 
 
\t 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 { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t height: 100vh; 
 
} 
 

 

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

 
footer img[usemap] { 
 
\t height: auto; 
 
\t max-width: 100%; 
 
\t 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>