SVG에 기본 div를 플로팅하는 방법

Question

float을 svg에 대한 기본 div로 만들려고합니다. 문제는 : screenwidt 줄이면 svg와 기본 div 사이의 거리가 늘어납니다. 어떻게 svg 아래의 div가 항상 공백없이 svg에 떠 다니는 것을 얻을 수 있습니까?

<div class="svg"> 
    <svg viewBox="0 0 1439 150" style="position:fixed; top:250px; left:0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
    <g id="Sell-on-FG-Flow" transform="translate(-1.000000, -2412.000000)" fill="#1e90ff"> 
     <g id="Customer-Section" transform="translate(1.000000, 1026.000000)"> 
      <g id="loading" transform="translate(0.000000, 1386.807849)"> 
-----pathes are here --- 
      </g> 
     </g> 
    </g> 
</g> 
</svg> 
</div> 
<div class="under"> 
let the red div float against the waves 
</div> 

그리고 CSS :

이

내 코드입니다

.svg { 
    height: 400px; 
    width: 100%; 
} 
.under { 
    height: 40px; 
    background: red; 

} 

바이올린 다음 SVG에서 https://jsfiddle.net/45b3n5q8/1/

Answer 1

위치 고정 인라인 스타일은 문서 흐름과에서 요소를 제거합니다 절대 위치처럼 동작하고 svg에서 인라인 스타일을 제거하면 괜찮을 것입니다. 음의 여백 상단으로 제거 할 수있는 작은 여백이 있습니다.

.under { 
    background: red; 
    margin-top: -5px; 
    } 

는 pen