量表SVG图像 - 视框

我有SVG三角形我穿上段的顶部：量表SVG图像 - 视框

position: relative; 
top: 0; 
left: 0;

我的SVG：

<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve"> 
     <g> 
      <polygon style="fill:#fd7013;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3  "/> 
     </g> 
     <rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/> 
     <text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fff; font-family:'Lato'; font-size:33.8486; font-weight: bold;">title</text> 
</svg>

当屏幕小于< 450像素我改变宽度（媒体查询）：

width: 100%;

但我的SVG是不是在最前面：0 :( 屏幕：http://prntscr.com/aa27iy

如何使我的svg响应和永远在上面：0？

来源

2016-03-02 Dominik

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prueba</title> 
    <style> 
     #section{ 
     background-color: #fc7013; 
     position: relative; 
     height: 500px; 
     padding: 80px 0px; 
     } 
     svg{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     max-width: 100%; 
     height: auto; 
     } 
    </style> 
    </head> 
    <body> 
    <section id="section"> 
     <svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve"> 
     <g> 
      <polygon style="fill:#fff;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3  "/> 
     </g> 
     <rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/> 
     <text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fd7013; font-family:'Lato'; font-size:33.8486; font-weight: bold;">#exampletext</text> 
     </svg> 
     <H1>TITLE</H1> 
    </section> 
    </body> 
</html>

样子，所以我的作品

来源

2016-03-02 00:08:17

当我将高度：100％，绝对位置不工作，我的SVG跳转到其他部分（上） – Dominik

@Dominik哪个位置绝对？我想，你使用相对位置 –

@Dominik如果你会使用'postion：absolute'，那么不要使用'height：100％;'并且使用像'height：20vh;' –

量表SVG图像 - 视框

回答

相关问题