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