web-dev-qa-db-ja.com

背景画像として使用するために回転した線形グラデーションsvgを取得するにはどうすればよいですか？

私はこれの周りで踊っているいくつかの質問を見たので、これがあまり冗長ではないことを願っています。理想的には、コンテナの100％にスケーリングするimage/svg+xmlが欲しいです。 Colorzilladata: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>

注：width="100%" height="100%"このグラデーションを取得して回転させたいのですが65deg HTML5キャンバス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%);
}

幅と高さが100％のimage/svg+xmlを使用します。

私は試してみました http://svg-edit.googlecode.com しかし、インターフェースは私がやりたい編集の種類に対して直感的ではありませんでした。ありがとう！

cssinternet-explorersvgcanvasdata-uri
18
bodine

グラデーションを回転するには、たとえば次のように「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>
31
Erik Dahlström

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) . '%',
)
8
Giel Berkers
<linearGradient gradientTransform="rotate(65)">
5
Henrik Albrechtsson

JavascriptでのGielBerkersのソリューションは次のようになります。

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