SVG占用屏幕尺寸

Question

我试图让400％我的SVG占用的屏幕宽度和高度的400％，所以我可以移动它来改变梯度：

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％！

Answer 1

只需在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>