Question

我有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>

当屏幕小于＆lt; 450像素时，我将宽度（媒体查询）更改为：

width: 100%;

但我的svg不在顶部：0 :( 屏幕：http://prntscr.com/aa27iy

如何使我的svg响应并始终排在最前面：0？

Answer 1

<!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>

看，我这样做

缩放SVG图像 - 视图框

1 个答案: