Microsoft EdgeでSVG内の要素を変換できない

Question

何らかの理由で、Microsoft EdgeではSVG内部の要素の変換を許可していません。塗りつぶしがうまくいきます（私は要素のターゲットが動作していることを知っています）。しかし、変換は完全に無視されます。これはクロムでうまく動作し、私が言うことができる限り、はもEdgeでうまく動作するはずです。

HTML：

<div class="test-container"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 400" xmlSpace="preserve"> 
    <g id="Type"> 
     <g> 
     <rect x="100" class="st1" id="rect1" width="100" height="100"/> 
     <rect x="100" y="100" class="st1" id="rect2" width="100" height="100"/> 
     </g> 
    </g> 
    </svg> 
</div> 

CSS：

.test-container { 
    width: 100px; 
} 
#rect1 { 
    fill: blue; 
    transform: translate(50px); 
} 
#rect2 { 
    fill: red; 
} 

はここcodepen例を参照してください：http://codepen.io/dwolfand/pen/pEzQgy

任意のアイデア？

Answer 1

2016年8月31日現在、Microsoft EdgeはSVG要素のCSS変換をサポートしていません。しかし、これは将来のリリースでEdgeチームによって検討されています。他のブラウザ間のサポートがある場合、status.microsoftedge.comはとなる可能性があります。とします。

Answer 2

これはD3.jsライブラリで問題が発生したことに関連している可能性があります。 Edgeが生成した属性プロパティ（および他のブラウザはありません）は常にSVG標準でサポートされていない大文字で表示されるため、図形は黒で塗りつぶされます。要素を調べて、属性が大文字であるかどうかを確認します。そうであれば、それはEdgeの既知の問題です。