CODEWITHSUNDEEP
htmlcsssvg
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29149

two svg element has weird behavior in IE10

I have a situation with 2 svg elements. I have simplified and removed everything I can and still be able to reproduce the effect in IE10. Here is the jsfiddle. Running the code in Chrome it looks right, but in IE10 the shape is completely black. However, If I remove the first svg it works in IE10.

I think it has to do with

<defs>
    <linearGradient id="fadeout" x2="0" y2="1">
        <stop offset="0%" class="dark"></stop>
        <stop offset="100%" class="light"></stop>
    </linearGradient>
    <linearGradient id="fadein" x2="0" y2="1">
        <stop offset="0%" class="light"></stop>
        <stop offset="100%" class="dark"></stop>
    </linearGradient>
</defs>

but I don't understand why and how! Any suggestions ?

Upvotes: 1

Views: 105

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

You have multiple elements with the same id, this is invalid. All ids in a file must be unique.

Upvotes: 2

Related Questions