我正在尝试将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

最佳答案

您是否考虑过将SVG用作背景图像并将background-size属性设置为cover?

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

10-06 04:27
查看更多