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;

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

1 个答案: