Създайте 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