SVG translate transform in javascript not working in IE 11

Question

The following code doesn't work in IE 11 (Chrome works fine)

<html>
    <head>
        <script>
            window.onload = function() {document.getElementById("abc").style.transform = "translate(100px,100px)";};
    </script>
</head>
<body>
    <div>   
        <svg width="200" height="200">
            <g id="abc">
                <polygon points="14,7 0,14 0,0"></polygon>
            </g>
        </svg>
    </div>
</body>

Chk this.. Might help.. http://stackoverflow.com/questions/27494296/svg-not-showing-in-ie11 — Sharon, May 09 '16 at 07:10

score 2 · Accepted Answer · answered May 09 '16 at 07:25

For IE you need to set transform as an attribute rather than as a CSS style.

Note that for an attribute, units are not allowed.

<html>
    <head>
        <script>
            window.onload = function() {document.getElementById("abc").setAttribute("transform", "translate(100, 100)")};
    </script>
</head>
<body>
    <div>   
        <svg width="200" height="200">
            <g id="abc">
                <polygon points="14,7 0,14 0,0"></polygon>
            </g>
        </svg>
    </div>
</body>

SVG translate transform in javascript not working in IE 11

1 Answers1

Linked