バックグラウンドイメージとして使用するための回転リニアグラデーションsvgの取得方法は？

Question

私はこれを踊るいくつかの質問を見たので、これはあまりにも冗長ではないことを願っています。理想的には、image/svg+xmlが100％のコンテナになるようにしたいと思います。私はこの勾配を取るとすることにより、それを回転したいwidth="100%" height="100%"は、HTML5のキャンバスAPIは私がこれを構築するための素晴らしい方法を提供65deg を言う： Colorzillaは私data:image/svg+xml

<?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> 

注意して素晴らしいスタートを取得しますIE8とIE7をpolyfillするには.toDataURL() PNGを使いますが、私はIE9用にスケーラブルなものを作りたいと思います。

だから目標は、これを複製することである：100％の幅と高さだ image/svg+xmlと

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%); 
} 

。

私が試したのはhttp://svg-edit.googlecode.comでしたが、私がやりたがっているタイプの編集ではインターフェイスが直感的ではありませんでした。 ありがとう！あなたは例えば次のように、「gradientTransform」属性を使用することができ、勾配回転させるように

Answer 1

：

<?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> 

Answer 2

を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) . '%', 
) 

Answer 3

JavaScriptで

Giel Berkersのソリューションは次のようになります。

// 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) + '%', 
} 

Answer 4

<linearGradient gradientTransform="rotate(65)">