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浏览器中运行以下代码段时，在图形顶部会看到不需要的细蓝线。但是，该问题并非特定于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

使用过滤器可以很简单地填充形状：

Route    Driver    Count

A

         Adam      count
                   count
                   count
                   count
                  continues till the number of times Adam appears




B      
         Adam      25
                   25
                   25
                   25
                   continues 25 times

         Mike       5
                    continues 5 times


C

         Josh       10 
                    continues 10 times

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

1 个答案: