SVG 瓦片间隙仅 Chrome

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

您可以通过在过滤器末尾执行 erode/dilate 来修复边缘。 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

SVG tile gaps on Chrome only

svg

textures

google-chrome

svg-filters