Создайте svg linearGradient точно так же, как спецификация css3

Я хочу воссоздать линейный градиент css с определенной степенью в svg.

Например:

linear-gradient(45deg, yellow,green)

В svg я мог бы воссоздать его, если бы знал ширину и высоту, но я хочу создать плавный градиент

Мое лучшее решение:

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1 1'>
    <defs>
        <linearGradient id='g' x1="1"y1='0' y2='1' gradientTransform='rotate(45, .5, .5)'>
            <stop offset='0%' stop-color='green' />
            <stop offset='100%' stop-color='yellow' />
        </linearGradient>
    </defs>
    <rect x='0' y='0' width='100%' height='100%' fill='url(#g)'/>
</svg>

Это создаст квадрат с градиентом, и квадрат будет обрезан сбоку, чтобы создать самый большой квадрат, возможный в области просмотра.

Но в спецификации css3 точка цвета будет начинаться с ближайшего угла, но с моим решением она начнется там, где начинается квадрат.

Есть ли лучшее решение?

Надеюсь понятно описал ;)


svg gradient css linear-gradients angle
person Lemnis    schedule 27.10.2013    source источник
comment
Вы можете получить тот же результат, что и с помощью CSS, но только если вы создадите собственный градиент для каждого элемента. В противном случае вы не сможете получить лучший результат, чем решение Роберта. Для квадратов он совпадает, но чем больше он выходит за рамки квадрата, тем хуже он становится.   -  person Paul LeBeau    schedule 27.10.2013

Ответы (1)


arrow_upward
0
arrow_downward

Это кажется довольно близким...

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1 1'>
    <defs>
        <linearGradient id='g' x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect x='0' y='0' width='100%' height='100%' fill='url(#g)'/>
</svg>
person Robert Longson    schedule 27.10.2013
comment
Я не понимал, что я не установил цветную остановку в нужном месте (сейчас я это исправил). Но ваш код даст точно такой же результат, как и мой. Комментарий BigBadaBoom убедил меня, что нет лучшего решения. - person Lemnis; 28.10.2013