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

Question

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

假设源图像是彩色图像，我想赋予图像以下外观。

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

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

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

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

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>