Как получить вращающийся линейный градиент svg для использования в качестве фонового изображения?

Я видел несколько вопросов, танцующих вокруг этого, поэтому я надеюсь, что это не слишком избыточно. В идеале, мне нужен image/svg+xml, который масштабируется до 100% контейнера. 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>

Примечание: width="100%" height="100%" Я хотел бы взять этот градиент и повернуть его, скажем 65deg API-интерфейс canvas HTML5 предоставляет отличный способ для создания этого изображения, а затем использовать .toDataURL() PNG для polyfill 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, но интерфейс был менее интуитивным для типов редактирования, которые я хотел сделать. Спасибо!

Ответ 1

Чтобы повернуть градиент, вы можете, например, использовать атрибут 'GrainTransform', например:

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

Ответ 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) . '%',
)

Ответ 3

<linearGradient gradientTransform="rotate(65)">

Ответ 4

Решение 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) + '%',
}