文章/答案/技术大牛

发布

问缩放SVG图像- viewbox
EN

Stack Overflow用户

提问于 2016-03-02 08:00:19

回答 1查看 559关注 0票数 0

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>

width: 100%;

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

如何使我的svg响应性和永远在top: 0？

css

svg

html

回答 1

Stack Overflow用户

发布于 2016-03-02 08:08:17

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

听着，所以对我来说很有效

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35736020

复制

相似问题

问缩放SVG图像- viewbox
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放SVG图像- viewboxEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放SVG图像- viewbox
EN