SVG占用屏幕尺寸
问题描述:
我试图让400%我的SVG占用的屏幕宽度和高度的400%,所以我可以移动它来改变梯度:SVG占用屏幕尺寸
SVG
html, body {
margin:0;
padding:0;
overflow:hidden;
}
svg {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 400%;
width: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
<stop offset="100%" stop-color="#006600" stop-opacity="1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />
</svg>
但是,这甚至不能填满100%的屏幕,但单独400%!
答
只需在svg:not(:root)
内添加您的SVG CSS。检查更新摘录如下
html, body {
margin:0;
padding:0;
height: 100%;
}
/*svg {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 400%;
width: 400%;
}*/
svg:not(:root) {
width: 400%;
height: 400%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="LinearGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" gradientTransform="rotate(45)">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1" />
<stop offset="100%" stop-color="#006600" stop-opacity="1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#LinearGradient);" />
</svg>
非常感谢你。 – Jimmy