Как получить повернутый линейный градиент SVG для использования в качестве фонового изображения? - PullRequest
Новая
       29

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

13 голосов
/ 27 января 2012

Я видел несколько вопросов, танцующих вокруг этого, поэтому я надеюсь, что это не слишком излишне.В идеале я бы хотел 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%" Я бы хотел взять этот градиент и повернуть его, скажем, 65degHTML5 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 но интерфейс был менее интуитивно понятен для типов редактирования, которые я хотел сделать.Спасибо!

Ответы [ 4 ]

31 голосов
/ 27 января 2012

Для поворота градиента вы можете использовать, например, атрибут '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>
7 голосов
/ 17 сентября 2015

Пожалуйста, обратите внимание, что атрибут 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) . '%',
)
5 голосов
/ 05 июля 2017 
<linearGradient gradientTransform="rotate(65)">
3 голосов
/ 19 октября 2016

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