当dom节点的子节点是svg时，为什么dom节点的scrollHeight大于其内容高度？

Question

下面是HTML dom节点#root，其中包含svg作为其唯一的子节点。

<div id="root" style="background-color: blue; height:100px; overflow:scroll; ">
  <svg>
    <rect width="50" height="50"
style="fill:red;stroke-width:1;
stroke:rgb(0,0,0)"/>
  </svg>
</div>

我希望节点#root的滚动节点高度为150px，因为其子节点svg svg.getBoundingClientRect（）。height为150px。但是实际上它的scrollHeight是154px。谁能解释svg子节点为何如此特别？