Question

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

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由用户调整大小

Chrome错误（？） https://bugs.chromium.org/p/chromium/issues/detail?id=1037885

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>

Answer 2

您可以通过在滤镜的末端进行腐蚀/扩张来固定边缘。哈克（Hacky）-而且形状略有变形-但比那些大线条要好。

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>
      <feMorphology operator="erode" radius="1"/>
      <feMorphology operator="dilate" radius="1"/>
    </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>

SVG磁贴间隙仅在Chrome上

2 个答案: