SVG HTML中的图像大小

我试图在SVG生成的六边形中获得一个图像，但无法使图像很好地适合SVG

小图像看起来模糊，大图像太大，不能缩小

如果有人知道如何使SVG中的图像能够很好地缩放，或者知道如何将图像动态拉成六边形的更好方法，我们将不胜感激

HTML

  <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="loginHex" patternUnits="userSpaceOnUse" width="200" height="200">
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://i.imgur.com/efrgBNf.jpg" x="-25"></image>
      </pattern>
    </defs>
    <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#loginHex)"></polygon>
  </svg>

---

100的图像上的高度和宽度以及x属性的删除对我来说似乎是正确的。这就是你想要的吗？是的，太好了，非常感谢！

svg{
  width:50%;
  margin:0 auto;
  display: block;
  margin-bottom: 20px;
}
#hex{
  stroke-width:2;
  stroke: #000000;
}