Как масштабировать детей SVG на IE

Question

Посмотрите на этот Jsfiddle: https://jsfiddle.net/wmn63d68/7/

HTML:

<svg id="hexagone" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"> 
    <polygon points="397.731,198.75 299.798,368.5 103.933,368.5 6,198.75 103.933,29 299.798,29 " /> 
</svg> 

CSS:

svg#hexagone polygon { 
    transform-origin: 50% 50%; 
    fill: transparent; 
    stroke-width: 3; 
    stroke: blue; 
} 

svg#hexagone polygon { 
    transform: scale(0.5); 
    -ms-transform: scale(0.5); 
} 

Как вы можете видеть, масштаб отлично работает на Chrome, FF ... Однако он не работает на IE (все свойства преобразования). Он работает только на тегах, таких как div или svg, но не на дочерних svg (путь, многоугольник, прямоугольник ...).

Возможно, у кого-то есть идея?

Answer 1

В этом article (на немецком языке) указано, что IE не может обрабатывать селекторов CSS потомков внутри элементов SVG. Также упоминается here: svg.parent path.child { /* won't work! */ }

Я разместил аналогичный question на SO.

Назначение класса или идентификатора polygon само по себе может быть выбрано непосредственно и, следовательно, даже в IE.