[SVG瓷砖间隙仅在Chrome上

Question

我遇到了SVG磁贴的问题，在调整SVG大小时出现间隙

JSFiddle

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="100" height="100"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>

预期：

结果：

如何解决此问题？ （仅在Chrome上出现）

信息：svg由用户调整大小

Answer 1

纹理的边缘上实际上有较浅的部分...为什么只在chrome idk中看到此...但是将图像变大会使线条消失...

<feImage width="101" height="104"></feImage>

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="101" height="104"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>