如何将SVG效果应用于图像或div容器？

Question

这是我第一次使用SVG图形，我有点困惑…我进行了广泛的研究，但似乎找不到我想要做的事情的答案。

假设源图像是彩色图像，我想给出一个图像如下的外观。

​

​

这种效果背后的主要原因是为了克服我的客户可能会上传到他们的网站上的糟糕的图像质量(在美学和分辨率方面)。

在Photoshop中，这是一个渐变贴图和一个模式倍增的透明网格。

我已经设法为灰度和“渐变图”应用了一个过滤器，但是我不能添加网格/图案。

这是我到目前为止的代码：

SVG文件渐变-map.svg

<svg xmlns="http://www.w3.org/2000/svg">
   <filter id="duotone_filter">
      <feColorMatrix type="matrix" result="grayscale"
         values="1 0 0 0 0
                 1 0 0 0 0
                 1 0 0 0 0
                 0 0 0 1 0" >
      </feColorMatrix>
      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
        <feFuncR type="table" tableValues="0.0039525691 0.5764705882"></feFuncR>
        <feFuncG type="table" tableValues="0.0123456790 0.8431372549"></feFuncG>
        <feFuncB type="table" tableValues="0.0123456790 0.9803921569"></feFuncB>
        <feFuncA type="table" tableValues="0 1"></feFuncA>
     </feComponentTransfer>
  </filter>        
</svg>

HTML

<div class="image">
    <img src="link/to/file" />
</div>

CSS

.image {
   filter: url('../images/gradient-map.svg#duotone_filter');
}

和模式/填充的SVG文件

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="6px" height="6px" viewBox="0 0 6 6">
   <circle cx="3" cy="3" r="2" />
</svg>

这是不是应该这样做呢？我应该如何着手来达到这个效果？

如果你也能链接我到有用的资源，我将不胜感激。我没有找到任何最近的指南或文章。

谢谢。

Answer 1

你在正确的轨道上。这是我在Codepen上放在一起的一个演示。和输出：

​

​

这是一个对Overlay grid on responsive image有帮助的问题，但我选择了简单地覆盖和缩放一个大型的透明PNG。如果你使用一个小的，重复的网格部分，你可能会得到更好的结果。当然，你必须选择什么颜色，大小等，以使网格覆盖。

另外，您不能将:after或:before伪元素与img元素一起使用，因此需要将它们包装在容器中。您还可以使用其他元素来完成此操作，例如：

<div class="img-container">
    <img src="..." />
    <div class="grid-overlay"></div>
</div>

但我更喜欢伪元素，这样我就不必在每次想要网格覆盖时都重复<div class="grid-overlay"></div>。

​

img {
  filter: url(#duotone_filter)
}

.img-container {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 375px;
}

.img-container::after {
  content: '';
  display: block;
  position: absolute;
  background-image: url('http://www.freeiconspng.com/uploads/grid-png-31.png');
  background-size: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="img-container"><img src="http://kb4images.com/images/random-image/37670495-random-image.jpg" /></div>

<svg xmlns="http://www.w3.org/2000/svg">
   <filter id="duotone_filter">
      <feColorMatrix type="matrix" result="grayscale"
         values="1 0 0 0 0
                 1 0 0 0 0
                 1 0 0 0 0
                 0 0 0 1 0" >
      </feColorMatrix>
      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
        <feFuncR type="table" tableValues="0.0039525691 0.5764705882"></feFuncR>
        <feFuncG type="table" tableValues="0.0123456790 0.8431372549"></feFuncG>
        <feFuncB type="table" tableValues="0.0123456790 0.9803921569"></feFuncB>
        <feFuncA type="table" tableValues="0 1"></feFuncA>
     </feComponentTransfer>
  </filter>        
</svg>

​

另一个使用 (symbols)的示例

​

​

其中一个final example也可以在火狐中使用，并使用了两个SVG过滤器。这个例子的关键是它使用了另一个过滤器来创建合成图像。我从web上获取了另一个SVG，但您可以使用内联SVG并通过ID引用它。

<filter id="overlay">
    <feImage result="sourceTwo" xlink:href="http://www.vectorstash.com/vectors/vectorstash-grid.svg" width="500" height="375" preserveAspectRatio="none" x="0" y="0" />
    <feComposite in="SourceGraphic" in2="sourceTwo" operator="out" x="0" y="0" />
  </filter>

Answer 2

一种简单的方法是将网格的内联SVG放入feImage原语中，从而将网格覆盖与过滤器结合起来。

(我还更改了灰度矩阵，因为它只使用红色通道作为源，这将在蓝色/绿色大量照片上创建奇怪的结果。)

​

.filterclass {
    filter: url(#duotone_filter);
}

<svg xmlns="http://www.w3.org/2000/svg">
   <filter id="duotone_filter" color-interpolation-filters="sRGB" x="0%" y="0%" width="100%" height="100%">
      <feImage width="6" height="6" xlink:href= "data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20x%3D%220%22%20y%3D%220%22%20width%3D%226px%22%20height%3D%226px%22%20viewBox%3D%220%200%206%206%22%3E%0A%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%20stroke%3D%22grey%22/%3E%0A%3C/svg%3E"/>
      <feTile result="overlay"/>


      <feColorMatrix in="SourceGraphic" type="matrix" result="grayscale"
         values=".33 .33 .33 0 0
                 .33 .33 .33 0 0
                 .33 .33 .33 0 0
                 0 0 0 1 0" />

      <feComponentTransfer result="duotone">
        <feFuncR type="table" tableValues="0.0039525691 0.5764705882"></feFuncR>
        <feFuncG type="table" tableValues="0.0123456790 0.8431372549"></feFuncG>
        <feFuncB type="table" tableValues="0.0123456790 0.9803921569"></feFuncB>
        <feFuncA type="table" tableValues="0 1"></feFuncA>
     </feComponentTransfer>
    <feBlend mode="multiply" in="overlay"/>
  </filter>        
</svg>

<div >
<img class="filterclass" src="http://kb4images.com/images/random-image/37670495-random-image.jpg" />
</div>

​

内联数据uri的源SVG是

    <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="6px" height="6px" viewBox="0 0 6 6">
   <rect x="0" y="0" width="6" height="6" fill="none" stroke="grey"/>
</svg>

如果你想调整它--我使用这个svg+xml转换器--这是一个非常有用的https://codepen.io/yoksel/details/JDqvs