How to make a vertical cross browser linear gradient using svg (for modern browsers)?

Question

I am having trouble making SVG vertical linear gradients work in IE 11 , so the question is - given the following svg how to make the gradient identified as Gradient1 work in such a way that it is a vertical gradient?

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

                viewBox="0 0 79.4 59.5"  xml:space="preserve">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<g>

                <defs>


         <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%"  gradientTransform="rotate(45 50 50)">

             <stop  offset="0%" style="stop-color:#9AAFCC"/>

            <stop  offset="20%" style="stop-color:#557096"/>

            <stop  offset="35%" style="stop-color:#36557D"/>

            <stop  offset="49%" style="stop-color:#1E3F6B"/>

            <stop  offset="63%" style="stop-color:#0D305D"/>

            <stop  offset="87%" style="stop-color:#032756"/>

            <stop  offset="100%" style="stop-color:#002453"/>

      </linearGradient>



                </defs>

                <rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</g>





</svg>

I have of course tried to use a gradientTransform, what I have that works in Chrome (and presumably other browsers but not in IE) includes the following on the linearGradient element

x1="-383.9706" y1="317.1023" x2="-382.9706" y2="317.1023" gradientTransform="matrix(0 -27.3826 -27.3826 0 8722.7842 -10484.3682)"

however as soon as I try to do this in IE the gradient I have stops working and the rectangle just takes the first full stop color.

I am open to translating the gradient into CSS if it can be made to work in the svg if that is the only cross-browser solution available.

Paul LeBeau Paul LeBeau · Accepted Answer · 2016-06-24T15:49:55

Your example works the same in Chrome and IE for me.

<svg viewBox="0 0 79.4 59.5">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<defs>
  <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%"  gradientTransform="rotate(45 50 50)">
    <stop  offset="0%" style="stop-color:#9AAFCC"/>
    <stop  offset="20%" style="stop-color:#557096"/>
    <stop  offset="35%" style="stop-color:#36557D"/>
    <stop  offset="49%" style="stop-color:#1E3F6B"/>
    <stop  offset="63%" style="stop-color:#0D305D"/>
    <stop  offset="87%" style="stop-color:#032756"/>
    <stop  offset="100%" style="stop-color:#002453"/>
  </linearGradient>
</defs>

<rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</svg>

It's a linear gradient rotated 45 degrees as your markup requests.

If you want the gradient to be vertical, remove the gradientTransform.

<svg viewBox="0 0 79.4 59.5">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<defs>
  <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%">
    <stop  offset="0%" style="stop-color:#9AAFCC"/>
    <stop  offset="20%" style="stop-color:#557096"/>
    <stop  offset="35%" style="stop-color:#36557D"/>
    <stop  offset="49%" style="stop-color:#1E3F6B"/>
    <stop  offset="63%" style="stop-color:#0D305D"/>
    <stop  offset="87%" style="stop-color:#032756"/>
    <stop  offset="100%" style="stop-color:#002453"/>
  </linearGradient>
</defs>

<rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</svg>

How to make a vertical cross browser linear gradient using svg (for modern browsers)?

1 Answers