CSS - абсолютное позиционирование SVG (IE)

Question

Я попытался позиционировать простые формы SVG с абсолютным положением. Кажется, что он отлично работает в Firefox, Google Chrome, но не в Internet Explorer (у меня нет Mac для тестирования в сафари ... если кто-то может подтвердить). Существует также небольшая проблема с треугольником нижнего SVG, который неправильно справа (1px отсутствует, по-видимому)

Что не так и как правильно позиционировать SVG?

Фидл: http://fiddle.jshell.net/g5zqrdxx/3/

HTML:

<div class="container"> 

    <div class="triangle-top"> 
     <svg width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1"> 
      <polygon points="0,1 1,0 0,0" /> 
     </svg> 
    </div> 

    <div class="triangle-bottom"> 
     <svg width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1"> 
      <polygon points="1,1 1,0 0,1 1" /> 
     </svg> 
    </div> 

</div> 

CSS:

.container { 
    position: relative; 
    display: block; 
    height: 350px; 
    width: 350px; 
    background: #444444; 
} 
.triangle-top { 
    position: absolute; 
    display: block; 
    width: 20%; 
    left: 0; 
    top: 0; 
} 
.triangle-top svg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    fill: red; 
} 
.triangle-bottom { 
    position: absolute; 
    display: block; 
    width: 20%; 
    right: 0; 
    bottom: 0; 
} 
.triangle-bottom svg { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    fill: green; 
} 

Answer 1

Наконец, я использовал альтернативное решение с чистым CSS, чтобы получить тот же результат.

http://fiddle.jshell.net/g5zqrdxx/5/

HTML:

<div class="container"> 

    <div class="triangle-top"> 
     <div class="triangle-up-left" style="border-color:red"></div> 
    </div> 

    <div class="triangle-bottom"> 
     <div class="triangle-down-right" style="border-color:red"></div> 
    </div> 

</div> 

CSS:

.container { 
    position: relative; 
    display: block; 
    height: 350px; 
    width: 350px; 
    background: #444444; 
} 
.triangle-top { 
    position: absolute; 
    display: block; 
    width: 20%; 
    left: 0; 
    top: 0; 
} 
.triangle-bottom { 
    position: absolute; 
    display: block; 
    width: 20%; 
    right: 0; 
    bottom: 0; 
} 
.triangle-up-left { 
    width: 0; 
    height: 0; 
    padding-bottom: 100%; 
    padding-left: 100%; 
    overflow: hidden; 
} 
.triangle-up-left:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left: -500px; 
    border-bottom: 500px solid transparent; 
    border-left: 500px solid; 
    border-left-color: inherit; 
} 
.triangle-down-right { 
    width: 100%; 
    height: 0; 
    padding-top: 100%; 
    overflow: hidden; 
} 
.triangle-down-right:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-top:-500px; 
    border-top: 500px solid transparent; 
    border-right: 500px solid; 
    border-right-color: inherit; 
}