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

Question

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

鉴于源图像是彩色图像，我想为图像提供以下外观。

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

在 Photoshop 中，这是一个渐变贴图和一个在 Mode Multiply 中的透明网格。

我已设法为灰度和“渐变图”应用过滤器，但无法添加网格/图案。

这是我目前的代码：

SVG 文件渐变映射.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

一种方便的方法是通过将网格的内联 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

Answer 2

你在正确的轨道上。这是我放在一起的一个演示（在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>