如何在html元素的頂部定位svg對象？

-3

我使用SVG的對象和一些HTML div元素，這樣的..如何在html元素的頂部定位svg對象？

.layer2{ 
 
     position: absolute; 
 
    top: 0; 
 
    left: 180px; 
 
    height: 100vh; 
 
    width: 10%; 
 
    display: block; 
 
     background: rgba(0, 0, 0, 0.6); 
 
    
 
    }

<div class="show"> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#ED1C24;} 
 
</style> 
 
<path id="XMLID_6_" class="st0" d="M300.4,287.9c-55.2,0-100,44.8-100,100c0,55.2,44.8,100,100,100c55.2,0,100-44.8,100-100 
 
\t C400.4,332.6,355.6,287.9,300.4,287.9z M300.4,437.9c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50c27.6,0,50,22.4,50,50 
 
\t C350.4,415.5,328,437.9,300.4,437.9z"/> 
 
</svg> 
 
</div> 
 

 
    <div class="layer2"></div>

我想在html元素即SVG對象的頂部位置SVG對象佔有頂層。這樣 desire output image file here

desire rendering

任何一個可以幫助？

來源

2017-06-22 Raihan Akash

圓_is_在矩形的頂部。問題來自您的SVG：它實際上是一個非常大的透明矩形，中間有一個紅色圓圈。但它的位置正確，只是左上角不在你期望的位置。 –

只要給你一個SVG和position: relative的Z索引值，因爲這樣的：

.layer2 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 180px; 
 
    height: 100vh; 
 
    width: 5%; 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 

 
svg#Layer_1 { 
 
    position: relative; 
 
    z-index: 200; 
 
    width: 350px; 
 
}

<div class="show"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#ED1C24;} 
 
</style> 
 
<path id="XMLID_6_" class="st0" d="M300.4,287.9c-55.2,0-100,44.8-100,100c0,55.2,44.8,100,100,100c55.2,0,100-44.8,100-100 
 
\t C400.4,332.6,355.6,287.9,300.4,287.9z M300.4,437.9c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50c27.6,0,50,22.4,50,50 
 
\t C350.4,415.5,328,437.9,300.4,437.9z"/> 
 
</svg> 
 
</div> 
 

 
<div class="layer2"></div>

來源

2017-06-22 15:09:11

如何在html元素的頂部定位svg對象？

回答

相關問題