讓SVG線性漸變以特定角度填充矩形總是

我需要使用從左上角到右下角的單個線性漸變填充不同長寬比和大小的矩形，並且總是以45度角（而不僅僅是從角到角）。讓SVG線性漸變以特定角度填充矩形總是

下面是代碼，從角落到角落填充矩形，我如何使它在45deg？

還是一個的jsfiddle https://jsfiddle.net/45nuu6L0/

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50"> 
    <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1"> 
    <stop offset="0" style="stop-color:#000"/> 
    <stop offset="0.48" style="stop-color:#000;stop-opacity:0"/> 
    <stop offset="1" style="stop-color:#000"/> 
    </linearGradient> 
    <rect width="100%" height="100%" fill="url(#gradient)" /> 
</svg>

來源

2016-01-21 Spadar Shut

是不是其中任一梯度從頂部進入從左上到右下或它進入45度不同時（除了在一個正方形的情況下）的情況下？ –

SVG漸變不支持該行爲。我不相信有什麼方法可以實現你所需要的，而不用用JS動態操作SVG漸變。 –

我的事情你要和你的LinearGradient的gradientTransform性能的發揮。作爲起點：

<!DOCTYPE html> <html> <body> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50"> 
 
    <linearGradient gradientTransform="rotate(-45)" id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" > 
 
<stop offset="0" style="stop-color:#000"/> 
 
<stop offset="0.48" style="stop-color:#000;stop-opacity:0"/> 
 
<stop offset="1" style="stop-color:#000"/> 
 
    </linearGradient> 
 
    <rect width="100%" height="100%" fill="url(#gradient)" /> 
 
</svg> 
 

 
</body></html>

來源

2016-01-21 15:17:26

讓SVG線性漸變以特定角度填充矩形總是

回答

相關問題