CSS scaling is not working properly in IE10

Question

I have tried to scale the following SVG path. This works fine in chrome and firefox. But in IE10 it is not working. Any suggestions? Please find my code below.

 .two { transition: all 2s ease-in-out 0.5s; -webkit-transition: all 2s ease-in-out 0.5s; } #scale { height: 150px; width: 100px; text-align: center; margin: 0 auto; } #scale { border: 1px blue solid; } .grow:hover { transform: scale(2.0); /*-ms-transform: scale(2.0);*/ -webkit-transform: scale(2.0); } 

 <svg width="220" height="220"> <g transform="translate(110,110)"> <path d="M0 -43.3 50 43.3 -50 43.3Z" fill="yellow" stroke="blue" stroke-width="2" id="scale" class="grow two" /> </g> </svg> 

Thanks in advance.

Answer 1

If you checkout browser compatibility from Can I Use for SVG you will found something like this screenshot

That's mean IE10 does not support <svg></svg> .