Transforming an element inside an SVG Doesn't Work

External Issue #8713749


Aug 31, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

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.

See codepen example here:

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

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

See codepen example here:


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “External”

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on and

    • Thank you for the feedback - we’ve recently landed initial support for CSS transforms on SVG elements and this work should be available in one of the WIP released soon. I’ve verified that your specific repro is fixed with the changes

    You need to sign in to your Microsoft account to add a comment.

    Sign in