From 50b9b6bac5748f23f73575b70d83a5a068fe342d Mon Sep 17 00:00:00 2001
From: sasensi <asensi.samuel@gmail.com>
Date: Wed, 4 Nov 2020 10:54:23 +0100
Subject: [PATCH] Fix: svg import ignores rectangle radius when only one side
 is set.

This follows the SVG spec in which only one side can be set and set the other
side to the same value in this case.
This also adds support for percent values.

Fixes #1863
---
 src/svg/SvgImport.js       | 10 +++++++++-
 test/assets/rectangles.svg | 10 ++++++++++
 test/tests/SvgImport.js    |  3 ++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 test/assets/rectangles.svg

diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js
index e4ab3fc7d1..ed4f86aeee 100644
--- a/src/svg/SvgImport.js
+++ b/src/svg/SvgImport.js
@@ -281,10 +281,18 @@ new function() {
 
         // https://www.w3.org/TR/SVG/shapes.html#RectElement
         rect: function(node) {
+            var rx = getValue(node, 'rx', false, true, true);
+            var ry = getValue(node, 'ry', false, true, true);
+            if (rx === null && ry !== null) {
+                rx = ry;
+            } else if (ry === null && rx !== null) {
+                ry = rx;
+            }
+            var radius = rx !== null && ry !== null ? new Size(rx, ry) : null;
             return new Shape.Rectangle(new Rectangle(
                         getPoint(node),
                         getSize(node)
-                    ), getSize(node, 'rx', 'ry'));
+                    ), radius);
             },
 
         // https://www.w3.org/TR/SVG/shapes.html#LineElement
diff --git a/test/assets/rectangles.svg b/test/assets/rectangles.svg
new file mode 100644
index 0000000000..a74bb62f63
--- /dev/null
+++ b/test/assets/rectangles.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 100 1000" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="100" height="100"/>
+    <rect x="0" y="110" width="100" height="100" rx="10"/>
+    <rect x="0" y="220" width="100" height="100" ry="10"/>
+    <rect x="0" y="330" width="100" height="100" rx="10" ry="10"/>
+    <rect x="0" y="440" width="100" height="100" rx="10%"/>
+    <rect x="0" y="550" width="100" height="100"/>
+    <rect x="0" y="660" width="100" height="100" rx="50"/>
+    <rect x="0" y="770" width="100" height="100" rx="60"/>
+</svg>
diff --git a/test/tests/SvgImport.js b/test/tests/SvgImport.js
index 3f8409a706..5443c55cd2 100644
--- a/test/tests/SvgImport.js
+++ b/test/tests/SvgImport.js
@@ -205,7 +205,8 @@ if (!isNodeContext) {
         'gradients-1': {},
         'gradients-2': !isPhantomContext && {},
         'gradients-3': {},
-        'gradients-4': {}
+        'gradients-4': {},
+        'rectangles': {}
     };
     Base.each(svgFiles, function(options, name) {
         if (options) {