diff --git a/core/block_render_svg.js b/core/block_render_svg.js
index 92ba5270f..362821264 100644
--- a/core/block_render_svg.js
+++ b/core/block_render_svg.js
@@ -76,11 +76,18 @@ Blockly.BlockSvg.CORNER_RADIUS = 8;
  * @const
  */
 Blockly.BlockSvg.START_HAT = false;
+/**
+ * Height of the top hat.
+ * @const
+ */
+Blockly.BlockSvg.START_HAT_HEIGHT = 15;
 /**
  * Path of the top hat's curve.
  * @const
  */
-Blockly.BlockSvg.START_HAT_PATH = 'c 30,-15 70,-15 100,0';
+Blockly.BlockSvg.START_HAT_PATH = 'c 30,-' +
+  Blockly.BlockSvg.START_HAT_HEIGHT +' 70,-' +
+  Blockly.BlockSvg.START_HAT_HEIGHT +' 100,0';
 /**
  * Path of the top hat's curve's highlight in LTR.
  * @const
@@ -480,6 +487,9 @@ Blockly.BlockSvg.prototype.renderCompute_ = function(iconWidth) {
  */
 Blockly.BlockSvg.prototype.renderDraw_ = function(iconWidth, inputRows) {
   this.startHat_ = false;
+  // Reset the height to zero and let the rendering process add in
+  // portions of the block height as it goes. (e.g. hats, inputs, etc.)
+  this.height = 0;
   // Should the top and bottom left corners be rounded or square?
   if (this.outputConnection) {
     this.squareTopLeftCorner_ = true;
@@ -497,6 +507,7 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(iconWidth, inputRows) {
       // No output or previous connection.
       this.squareTopLeftCorner_ = true;
       this.startHat_ = true;
+      this.height += Blockly.BlockSvg.START_HAT_HEIGHT;
       inputRows.rightEdge = Math.max(inputRows.rightEdge, 100);
     }
     var nextBlock = this.getNextBlock();
@@ -860,7 +871,7 @@ Blockly.BlockSvg.prototype.renderDrawRight_ = function(steps, highlightSteps,
  */
 Blockly.BlockSvg.prototype.renderDrawBottom_ =
     function(steps, highlightSteps, connectionsXY, cursorY) {
-  this.height = cursorY + 1;  // Add one for the shadow.
+  this.height += cursorY + 1;  // Add one for the shadow.
   if (this.nextConnection) {
     steps.push('H', (Blockly.BlockSvg.NOTCH_WIDTH + (this.RTL ? 0.5 : - 0.5)) +
         ' ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT);
diff --git a/core/flyout.js b/core/flyout.js
index 84bcbb810..5258feec8 100644
--- a/core/flyout.js
+++ b/core/flyout.js
@@ -510,6 +510,14 @@ Blockly.Flyout.prototype.reflow = function() {
         var blockXY = block.getRelativeToSurfaceXY();
         block.flyoutRect_.setAttribute('x',
             this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+        // For hat blocks we want to shift them down by the hat height
+        // since the y coordinate is the corner, not the top of the
+        // hat.
+        var hatOffset =
+          block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
+        if (hatOffset != 0) {
+          block.moveBy(0, hatOffset);
+        }
         block.flyoutRect_.setAttribute('y', blockXY.y);
       }
     }