Question

这是我第一次使用SVG图形而且我有点困惑......我已经进行了广泛的研究，但我似乎无法找到答案。我试图这样做。

如果源图像是彩色图像，我想给图像一个以下的外观。

这种效果背后的主要原因是克服了我的客户可能上传到他们网站的质量差的图像（无论是美学还是分辨率）。

在Photoshop中，这是一个渐变地图和模式乘法中的透明网格。

我设法为灰度和渐变映射应用滤镜＆＃34;但我无法添加网格/模式。

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

SVG文件gradient-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>

使用only SVGs (symbols)：

的示例

一个final example也适用于Firefox并使用两个SVG过滤器。此示例的关键是它使用另一个过滤器来创建合成图像。我从网上获取了另一个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

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

2 个答案: