如何獲得一個旋轉的線性漸變svg用作背景圖像？

我已經看到了圍繞此問題跳舞的幾個問題，所以我希望這不是太多餘。理想情況下，我想要一個image/svg+xml，它可以擴展到它的容器的100％。 Colorzilla讓我一個很好的開始了data:image/svg+xml如何獲得一個旋轉的線性漸變svg用作背景圖像？

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> 
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg>

注：width="100%" height="100%"我想借此梯度和旋轉，說65deg HTML5的Canvas API提供給我建立這個一個偉大的方式圖像，然後使用.toDataURL() PNG來填充IE8和IE7，但我希望可以擴展IE9。

因此我們的目標是複製這樣的：

background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%), 
linear-gradient(left, rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%), 
linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%), 
linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%); 
}

與image/svg+xml這是100％的寬度和高度。

我確實嘗試過http://svg-edit.googlecode.com，但界面對於我想要做的編輯類型並不直觀。謝謝！

來源

2012-01-26 bodine

要旋轉，你可以e.g使用「gradientTransform」屬性的梯度，這樣的：

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" 
viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" 
    x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)"> 
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> 
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg>

來源

2012-01-27 09:44:33

請注意gradientTransform屬性根據其旋轉漸變的錨點在0,0。要從「中心」旋轉它，您需要計算x1，y1，x2和y2的適當百分比。一個簡單的PHP例子：

// Rotation can be 0 to 360 
$pi = $rotation * (pi()/180); 
$coords = array(
    'x1' => round(50 + sin($pi) * 50) . '%', 
    'y1' => round(50 + cos($pi) * 50) . '%', 
    'x2' => round(50 + sin($pi + pi()) * 50) . '%', 
    'y2' => round(50 + cos($pi + pi()) * 50) . '%', 
)

來源

2015-09-17 18:21:08

更方便可靠地設置旋轉起源於gradientTransform爲兩個額外的參數給旋轉 –

莫非你提供了一個關於如何設置旋轉原點的例子？ –

in gradientTransform =「rotate（90，50，30）」旋轉的原點將是50，30 –

GIEL Berkers'在Javascript的解決辦法是：

// angle can be 0 to 360 
var anglePI = (angle) * (Math.PI/180); 
var angleCoords = { 
    'x1': Math.round(50 + Math.sin(anglePI) * 50) + '%', 
    'y1': Math.round(50 + Math.cos(anglePI) * 50) + '%', 
    'x2': Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + '%', 
    'y2': Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + '%', 
}

來源

2016-10-19 14:53:34

<linearGradient gradientTransform="rotate(65)">

來源

2017-07-05 12:40:46

如何獲得一個旋轉的線性漸變svg用作背景圖像？

回答

相關問題