Why is svg not displaying correctly in IE11?

Question

css

<svg width="0" height="0" class="texture-source">
            <defs>
                <path id="figure" d="M977,0v564H0C37.3,260.4,395.4,457.7,544.1,0H977z" />
                  <pattern id="texture" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
                    <image id="texture-link" xlink:href="img.jpg" width="500" height="500" />
                  </pattern>
            </defs>
        </svg>
        <svg class="index-slider-image hidden-xs hidden-sm" viewBox="0 0 977 564">
            <style type="text/css">
                #figure {
                    fill: url(#texture);
                }
            </style>
            <use xlink:href="#figure"></use>
        </svg>

And styles for him

.index-slider-image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 500px;
}

Everywhere works fine, except IE
Example of correct display:

Answer 1

He is an artist, he sees it that way. Seriously: just hammer in additional styles for ie, don't suffer)