Use bounding client rect dimensions.

Fixes #26.
exupero · Apr 19, 2015 · 7872e63 · 7872e63
1 parent c14b63c
commit 7872e63
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -192,6 +192,12 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
         <text x=100 y=100 text-anchor=middle dy=14 style="font-family:'Stalemate';font-size:36pt;">Custom Fonts</text>
       </svg>
     </li>
+
+    <li id=percentage-size>
+      <svg width="100%" height="100%">
+        <rect x=25 y=25 width=100 height=100></rect>
+      </svg>
+    </li>
   </ul>
 </div>
 
@@ -254,6 +260,7 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
     selector: '#sub-group'
   });
   inlineTest('With custom fonts', $('#custom-font'));
+  inlineTest('Percentage Height and Width', $('#percentage-size'));
 
   var $sandbox = $('#sandbox');
   $sandbox.find('.render').click(function() {

diff --git a/saveSvgAsPng.js b/saveSvgAsPng.js
@@ -90,8 +90,9 @@
       var clone = el.cloneNode(true);
       var width, height;
       if(el.tagName == 'svg') {
-        width = parseInt(clone.getAttribute('width') || clone.style.width || out$.getComputedStyle(el).getPropertyValue('width'));
-        height = parseInt(clone.getAttribute('height') || clone.style.height || out$.getComputedStyle(el).getPropertyValue('height'));
+        var box = el.getBoundingClientRect();
+        width = box.width;
+        height = box.height;
       } else {
         var box = el.getBBox();
         width = box.x + box.width;