为什么我的形状不会沿着明显的边界框旋转？

Question

我正在尝试旋转此图像（#small）以使其颠倒，但形状不会像我期望的那样旋转。在我看来，边界框将比它的表观旋转轴小得多。

这里到底发生了什么，我该如何解决？

MWE

<?xml version="1.0" encoding="utf-8"?>
<svg id="test-image"
     viewBox="0 0 816 1110"
     width="816" height="1110"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <g id="base">
      <svg viewBox="-8 -10 16 20" >
        <path d="M 7.989,3.103 C 7.747,-0.954 0.242,-8.59 0,-10.5 c -0.242,1.909 -7.747,9.545 -7.989,13.603 -0.169,2.868 1.695,4.057 3.39,4.057 1.8351685,-0.021581 3.3508701,-2.8006944 3.873,-3.341 0.242,0.716 -1.603,6.682 -2.179,6.682 l 5.811,0 C 2.33,10.501 0.485,4.535 0.727,3.819 1.1841472,4.3152961 2.5241276,7.0768295 4.601,7.16 6.295,7.159 8.158,5.971 7.989,3.103 z"
              style="fill:#000000" />
      </svg>
    </g>
    <g id="small">
      <use xlink:href="#base" transform="scale(0.1,0.1)" />
    </g>
  </defs>

  <!-- debugging grid -->
  <rect width="100%" height="100%" stroke="black" fill="white"/>
  <rect width="80%" height="80%"  stroke="lightgrey" fill="white" x="10%" y="10%" />
  <rect width="60%" height="60%"  stroke="lightgrey" fill="white" x="20%" y="20%" />
  <rect width="40%" height="40%"  stroke="lightgrey" fill="white" x="30%" y="30%" />
  <rect width="20%" height="20%"  stroke="lightgrey" fill="white" x="40%" y="40%" />
  <line x1="0%" x2="100%" y1="50%" y2="50%" stroke="lightgrey" />
  <line y1="0%" y2="100%" x1="50%" x2="50%" stroke="lightgrey" />

  <!-- rotation test -->
  <use xlink:href="#small" x="50%" y="50%" />
  <use xlink:href="#small" x="50%" y="50%" transform="rotate(10)" />
  <use xlink:href="#small" x="50%" y="50%" transform="rotate(20)" />
  <use xlink:href="#small" x="50%" y="50%" transform="rotate(30)" />
</svg>