由于某些原因,Microsoft Edge不允许您对SVG内部的元素进行变换。填充效果可以正常工作(因此我知道元素定位是有效的),但变换完全被忽略了。在Chrome中可以正常工作,据我所知,在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 有什么想法吗?