css - SVG 不会在 Chrome/Safari 中缩放全屏

Question

我正在尝试将 SVG 缩放为它的父级(正文)的完整宽度，并且出于某种原因它不会在 chrome/safari 上移动 - 但在 Firefox 上工作

    <svg class="svg-graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
      <defs>
        <pattern id='image' width="100%" height="140%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image xlink:href='http://25.media.tumblr.com/28c4327f8d41f73e2ed6ccdf7da27efb/tumblr_mw4knrtHlH1qz7p1oo1_500.jpg' width="100" height="100" preserveAspectRatio="none"></image>
       </pattern>
      </defs>
      <polygon points="0, 0, 0, 5, 25, 40, 50, 5, 75, 40, 100, 5, 100, 0,)" fill="url(#image)" />
    </svg>

CSS

html, body { 
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin:0; 
        padding:0; 
    }

    .svg-graphic {
        position: fixed;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;            
        z-index: 10;
    }

关注这篇文章here

Answer 1

您是否考虑过使用 SVG 作为背景图片并将 background-size 属性设置为覆盖？

    background-image: url(yoursvg.svg);
    background-repeat: no-repeat;
    background-size: cover;