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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用无重复图像图案填充形状:不需要的轮廓线相关的知识,希望对你有一定的参考价值。

在我的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浏览器中运行下面的代码段时,形状顶部会显示不需要的蓝色细线。然而,这个问题并非针对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>
答案

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

<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>

以上是关于使用无重复图像图案填充形状:不需要的轮廓线的主要内容,如果未能解决你的问题,请参考以下文章

图像轮廓之形状匹配

从图像边缘到物体轮廓

利用python绘制太阳花

将图像放入轮廓(OpenCV)

形位公差

图像识别中的图像特征类别