SVG矢量效应=“非缩放行程”伪像

Question

vector-effect似乎会导致文物。如果您将鼠标悬停在星标上，可以看到它在Chrome的最新发布版本中如何留下痕迹：

如果删除vector-effect，工件就会消失。

我能够解决这个问题的唯一方法是在动画期间在overflow: hidden元素上设置svg，这样就可以隐藏由于笔触粗细而溢出元素边界框的角落，这是不可取的。

body {
  padding: 10px;
}

.svg-wrapper {
  width: 300px;
  height: 300px;
  -webkit-transition: width 2s, height 2s; /* Safari */
  transition: width 2s, height 2s;  
}

.svg-wrapper:hover {
    width: 100px;
    height: 100px;
}

.svg-wrapper svg {
  overflow: visible;
}

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" viewBox="31, 25, 238, 226" stroke-width="10" stroke="red" >
    <polygon points="150,25 179,111 269,111 197,165 223,251 150,200 77,251 103,165 31,111 121,111" vector-effect="non-scaling-stroke" />
  </svg>
</div>

这个问题知道了吗？期待一些好的解决方法