Use SVG Namespace for SVG Elements (fabricjs#5957)

* Use SVG Namespace for createElement of SVG elements * Updating to use setAttributeNS * Reverting line endings... I hope * Fixing linter errors * Resetting dist/ and removing .gitattributes
brunovu20 · Dec 8, 2019 · 1fdb025 · 1fdb025
1 parent 9b5b4db
commit 1fdb025
Show file tree

Hide file tree

Showing 11 changed files with 387 additions and 339 deletions.
diff --git a/src/parser.js b/src/parser.js
@@ -476,10 +476,11 @@
 
       applyViewboxTransform(el2);
       if (/^svg$/i.test(el2.nodeName)) {
-        var el3 = el2.ownerDocument.createElement('g');
+        var namespace = 'http://www.w3.org/2000/svg';
+        var el3 = el2.ownerDocument.createElementNS(namespace, 'g');
         for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {
           attr = attrs.item(j);
-          el3.setAttribute(attr.nodeName, attr.nodeValue);
+          el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue);
         }
         // el2.firstChild != null
         while (el2.firstChild) {
@@ -624,7 +625,7 @@
                   (minY * scaleY + heightDiff) + ') ';
     parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix);
     if (element.nodeName === 'svg') {
-      el = element.ownerDocument.createElement('g');
+      el = element.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'g');
       // element.firstChild != null
       while (element.firstChild) {
         el.appendChild(element.firstChild);

diff --git a/test/unit/circle.js b/test/unit/circle.js
@@ -157,7 +157,8 @@
   QUnit.test('fromElement', function(assert) {
     assert.ok(typeof fabric.Circle.fromElement === 'function');
 
-    var elCircle         = fabric.document.createElement('circle'),
+    var namespace        = 'http://www.w3.org/2000/svg';
+    var elCircle         = fabric.document.createElementNS(namespace, 'circle'),
         radius           = 10,
         left             = 12,
         top              = 15,
@@ -170,16 +171,16 @@
         strokeMiterLimit = 5;
 
 
-    elCircle.setAttribute('r', radius);
-    elCircle.setAttribute('cx', left);
-    elCircle.setAttribute('cy', top);
-    elCircle.setAttribute('fill', fill);
-    elCircle.setAttribute('opacity', opacity);
-    elCircle.setAttribute('stroke-width', strokeWidth);
-    elCircle.setAttribute('stroke-dasharray', '5, 2');
-    elCircle.setAttribute('stroke-linecap', strokeLineCap);
-    elCircle.setAttribute('stroke-linejoin', strokeLineJoin);
-    elCircle.setAttribute('stroke-miterlimit', strokeMiterLimit);
+    elCircle.setAttributeNS(namespace, 'r', radius);
+    elCircle.setAttributeNS(namespace, 'cx', left);
+    elCircle.setAttributeNS(namespace, 'cy', top);
+    elCircle.setAttributeNS(namespace, 'fill', fill);
+    elCircle.setAttributeNS(namespace, 'opacity', opacity);
+    elCircle.setAttributeNS(namespace, 'stroke-width', strokeWidth);
+    elCircle.setAttributeNS(namespace, 'stroke-dasharray', '5, 2');
+    elCircle.setAttributeNS(namespace, 'stroke-linecap', strokeLineCap);
+    elCircle.setAttributeNS(namespace, 'stroke-linejoin', strokeLineJoin);
+    elCircle.setAttributeNS(namespace, 'stroke-miterlimit', strokeMiterLimit);
 
     fabric.Circle.fromElement(elCircle, function(oCircle) {
       assert.ok(oCircle instanceof fabric.Circle);
@@ -194,8 +195,8 @@
       assert.equal(oCircle.get('strokeLineJoin'), strokeLineJoin);
       assert.equal(oCircle.get('strokeMiterLimit'), strokeMiterLimit);
 
-      var elFaultyCircle = fabric.document.createElement('circle');
-      elFaultyCircle.setAttribute('r', '-10');
+      var elFaultyCircle = fabric.document.createElementNS(namespace, 'circle');
+      elFaultyCircle.setAttributeNS(namespace, 'r', '-10');
 
       var error;
       try {

diff --git a/test/unit/ellipse.js b/test/unit/ellipse.js
@@ -118,7 +118,8 @@
   QUnit.test('fromElement', function(assert) {
     assert.ok(typeof fabric.Ellipse.fromElement === 'function');
 
-    var elEllipse        = fabric.document.createElement('ellipse'),
+    var namespace        = 'http://www.w3.org/2000/svg';
+    var elEllipse        = fabric.document.createElementNS(namespace, 'ellipse'),
         rx               = 5,
         ry               = 7,
         left             = 12,
@@ -131,17 +132,17 @@
         strokeLineJoin   = 'bevil',
         strokeMiterLimit = 5;
 
-    elEllipse.setAttribute('rx', rx);
-    elEllipse.setAttribute('ry', ry);
-    elEllipse.setAttribute('cx', left);
-    elEllipse.setAttribute('cy', top);
-    elEllipse.setAttribute('fill', fill);
-    elEllipse.setAttribute('opacity', opacity);
-    elEllipse.setAttribute('stroke-width', strokeWidth);
-    elEllipse.setAttribute('stroke-dasharray', '5, 2');
-    elEllipse.setAttribute('stroke-linecap', strokeLineCap);
-    elEllipse.setAttribute('stroke-linejoin', strokeLineJoin);
-    elEllipse.setAttribute('stroke-miterlimit', strokeMiterLimit);
+    elEllipse.setAttributeNS(namespace, 'rx', rx);
+    elEllipse.setAttributeNS(namespace, 'ry', ry);
+    elEllipse.setAttributeNS(namespace, 'cx', left);
+    elEllipse.setAttributeNS(namespace, 'cy', top);
+    elEllipse.setAttributeNS(namespace, 'fill', fill);
+    elEllipse.setAttributeNS(namespace, 'opacity', opacity);
+    elEllipse.setAttributeNS(namespace, 'stroke-width', strokeWidth);
+    elEllipse.setAttributeNS(namespace, 'stroke-dasharray', '5, 2');
+    elEllipse.setAttributeNS(namespace, 'stroke-linecap', strokeLineCap);
+    elEllipse.setAttributeNS(namespace, 'stroke-linejoin', strokeLineJoin);
+    elEllipse.setAttributeNS(namespace, 'stroke-miterlimit', strokeMiterLimit);
 
     fabric.Ellipse.fromElement(elEllipse, function(oEllipse) {
       assert.ok(oEllipse instanceof fabric.Ellipse);