Merge pull request #1 from CubesterYT/develop

GarboMuffin · web-flow · commit 76c20bc2b93a · 2024-07-16T17:23:31.000-05:00
Fix `rx` and `ry` attributes
diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js
@@ -281,10 +281,24 @@ 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
diff --git a/test/assets/rectangles.svg 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
@@ -214,7 +214,8 @@ if (!isNodeContext) {
         'gradients-1': {},
         'gradients-2': !isPhantomContext && {},
         'gradients-3': {},
-        'gradients-4': {}
+        'gradients-4': {},
+        'rectangles': {}
     };
     Base.each(svgFiles, function(options, name) {
         if (options) {
