用不重复的图像图案填充形状：不需要的轮廓线

Question

在我的 Angular 应用程序中，用户可以将图像插入 SVG 形状并以交互方式对图像应用变换。默认情况下，图像会填充形状。

它运作良好，除了一个非常烦人的问题发生在以下情况：

• 形状没有描边
• 图像的一侧比另一侧暗得多

当满足这些条件时，在图像较亮的形状一侧会出现一条非常细的线。例如，如果图像的底部比顶部暗得多，则细线将出现在形状的顶部。那条线来自图像的另一侧，就好像图案试图重复一样。我知道图像模式没有像no-repeat 属性这样的东西，所以我设置了以下模式属性以避免重复：

<pattern patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" ...>

它有效，但并不完美。细线在屏幕上并不总是可见，即使在缩放时也是如此，但大部分时间都是如此。它给我们带来了麻烦，因为这些 SVG 形状是书页的一部分，而细线通常最终会在最终打印中可见。

有没有完全避免模式重复的好方法？我尝试扩展图案以使其溢出形状，但额外的尺寸必须有点显着才能有效：

<pattern x="-0.01" y="-0.01" width="1.02" height="1.02" ...>

当我在 Chrome 浏览器中运行下面的代码 sn-p 时，不需要的蓝色细线在形状顶部可见。但是，该问题并非特定于 Chrome；我也在 Firefox 上看到它。

<div style="padding: 20px; width: 180px; height: 150px; background-color: yellow;">
  <svg height="100%" width="100%" x="0%" y="0%" viewBox="0 0 1600 1200">
    <defs>
      <pattern id="pattern1" patternUnits="objectBoundingBox" 
        preserveAspectRatio="xMidYMid slice" 
        width="1" height="1" x="0" y="0" viewBox="0 0 1600 1200">
        <image width="1600" height="1200" x="0" y="0" 
          xlink:href="https://i.ibb.co/vZ9spGH/1600x1200-1.png"></image>
      </pattern>
    </defs>
    <rect fill="url('#pattern1')" height="100%" width="100%" x="0%" y="0%"></rect>
    </svg>
</div>

Answer 1

形状填充使用过滤器相当简单：

<div style="padding: 20px; width: 180px; height: 150px; background-color: yellow;">
  <svg height="100%" width="100%" x="0%" y="0%" viewBox="0 0 1600 1200">
    <defs>
      <filter id="simple-image-fill" primitiveUnits="userSpaceOnUse"> 
      
        <feImage width="1600" height="1200" x="0" y="0" preserveAspectRatio="xMidYMid slice"
          xlink:href="https://i.ibb.co/vZ9spGH/1600x1200-1.png" result="image-res"/>
          <feComposite operator="in" in2="SourceGraphic" in="image-res"/>
      </filter>
    </defs>
    <rect filter="url(#simple-image-fill)" height="100%" width="100%" x="0%" y="0%"/>
    </svg>
</div>