SVG图标看起来已剪裁，因为边框太大

Question

我摆弄了SVG图标，最后我喜欢它的外观，但是在将鼠标悬停在边框上时，动画看起来很像。我可以解决此问题，而不必逐个像素地重新定义每个像素吗？ https://codepen.io/anon/pen/bPqXVM?editors=1100

<svg class="svg-circle" width="40px" height="40px" viewBox="0 0 80 80">
  <circle class="svg-circle__border" cx="40" cy="40" r="36"></circle>
  <circle class="svg-circle__animated-border" transform="rotate(-90 40 40)" cx="40" cy="40" r="36"></circle>
  <circle class="svg-circle__fill" cx="40" cy="40" r="25"></circle>
  <line class="svg-circle__line svg-circle__line--horizontal" x1="40" y1="30" x2="40" y2="50"></line>
  <line class="svg-circle__line svg-circle__line--vertical" x1="30" y1="40" x2="50" y2="40"></line>
</svg>

.svg-circle {
  &:hover {
    .svg-circle__animated-border {
      animation-iteration-count: 1;
      animation-name: rotateCircleBorder;
      animation-duration: 2s;
      animation-timing-function: linear;
      stroke-dashoffset: 227;
      stroke-width: 18px;
    }
  }
  &__fill {
    fill: #000;
  }
  &__border {
    stroke: #000;
    stroke-width: 3px;
    fill: transparent;
  }
  &__animated-border {
    stroke-dasharray: 227;
    stroke-dashoffset: 0;
    stroke-width: 0;
    stroke: #000;
    fill: #fff;
    transition: stroke-dashoffset 2s linear;
  }

  &__line {
    stroke: #fff;
    stroke-width: 4px;
  }
}

@keyframes rotateCircleBorder {
  to {
    stroke-dashoffset: 0;
  }
}