fix(drag-drop): add support for dragging svg elements in IE11 (#14215)

Added check for when _rootElement is an SVGElement and set the transform attribute as well. IE11 does not acknowledge the style.transform property, but does allow the `transform` attribute

Closes #14214

Author: evanfuture

src/cdk/drag-drop/drag.spec.ts

@@ -66,6 +66,16 @@ describe('CdkDrag', () => {
         expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
       }));
 
+      it('should drag an SVG element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableSvg);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.getAttribute('transform')).toBeFalsy();
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.getAttribute('transform')).toBe('translate(50 100)');
+      }));
+
       it('should drag an element freely to a particular position when the page is scrolled',
         fakeAsync(() => {
           const fixture = createComponent(StandaloneDraggable);
@@ -2229,6 +2239,19 @@ class StandaloneDraggable {
   endedSpy = jasmine.createSpy('ended spy');
 }
 
+@Component({
+  template: `
+    <svg><g
+      cdkDrag
+      #dragElement>
+      <circle fill="red" r="50" cx="50" cy="50"/>
+    </g></svg>
+  `
+})
+class StandaloneDraggableSvg {
+  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
+}
+
 @Component({
   template: `
     <div #dragElement cdkDrag

src/cdk/drag-drop/drag.ts

@@ -491,6 +491,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       // Preserve the previous `transform` value, if there was one.
       this._rootElement.style.transform = this._initialTransform ?
           this._initialTransform + ' ' + transform : transform;
+
+      // Apply transform as attribute if dragging and svg element to work for IE
+      if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {
+        const appliedTransform = `translate(${activeTransform.x} ${activeTransform.y})`;
+        this._rootElement.setAttribute('transform', appliedTransform);
+      }
     }
 
     // Since this event gets fired for every pixel while dragging, we only