David Wolfand David Wolfand - 4 years ago 168
CSS Question

Transforming an element inside an SVG in Microsoft Edge Doesn't Work

For some reason Microsoft Edge doesn't allow you to do transforms on elements inside of an SVG. Fills work fine (so I know the element targeting is working) but transforms are entirely ignored. This works fine in chrome and as far as I can tell, should work fine in Edge too.

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;
}


See codepen example here: http://codepen.io/dwolfand/pen/pEzQgy

Any ideas?

Answer Source

As of August 31, 2016, Microsoft Edge does not support CSS transforms on SVG elements. This is however being considered by the Edge team for a future release. Given the support across other browsers, status.microsoftedge.com lists this work as likely.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download