From 216412d7bd196cd1e9f3931af4c6233b4633e92a 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       | 18 ++++++++++++++++--
 test/assets/rectangles.svg |  9 +++++++++
 test/tests/SvgImport.js    |  3 ++-
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 test/assets/rectangles.svg

diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js
index e4ab3fc7d1..961dcbc52c 100644
--- a/src/svg/SvgImport.js
+++ b/src/svg/SvgImport.js
@@ -281,11 +281,25 @@ new function() {
 
         // https://www.w3.org/TR/SVG/shapes.html#RectElement
         rect: function(node) {
+            var rx = SvgElement.get(node, 'rx');
+            var ry = SvgElement.get(node, 'ry');
+            if (rx === null && ry !== null) {
+                rx = ry;
+            } else if (ry === null && rx !== null) {
+                ry = rx;
+            }
+            if (/%\s*$/.test(rx)) {
+                rx = parseFloat(rx) * rootSize.width / 100;
+            }
+            if (/%\s*$/.test(ry)) {
+                ry = parseFloat(ry) * rootSize.height / 100;
+            }
+            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
         line: function(node) {
diff --git a/test/assets/rectangles.svg b/test/assets/rectangles.svg
new file mode 100644
index 0000000000..40bd6d7182
--- /dev/null
+++ b/test/assets/rectangles.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 100 1000" width="100" height="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" rx="50"/>
+    <rect x="0" y="660" 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) {