SVG雪碧过滤效果:仅中音

Question

，你能帮我找出如何用SVG?实现链接上的雪碧音吗？

用Photoshop的色彩平衡制作我的Sepia色调

我尝试了以下代码：

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

CSS：

img{
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

但是，我得到的feColorMatrix雪碧音是非常不同的，似乎并不像在Photoshop上那样只影响中间色调。

注:我不能用画布。

Answer 1

首先，这不是一个正确的败血症过滤器。它只使用红色通道作为输入，所以你失去了三分之一的亮度从球棒。“官方”的W3C黑滤器是：

   <feColorMatrix type="matrix"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

这给了你这个结果：

​

​

如果你只想处理中间音调，那么你需要把中间音调拉出来，分开处理。看起来是这样的：

<filter id="mid-sepia" color-interpolation-filters="sRGB">
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer >
    <feFuncA type="table" tableValues="0 .2 0.5 1 1 1 0.5 .2 0"/>
  </feComponentTransfer>
 <feComposite operator="in" in="SourceGraphic"/>
   <feColorMatrix type="matrix" result="sepia-clip"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

  <feColorMatrix in="SourceGraphic" type="matrix" result="gscale"
                values="0.2126 0.7152 0.0722 0 0 
                        0.2126 0.7152 0.0722 0 0 
                        0.2126 0.7152 0.0722 0 0 
                        0 0 0 1 0" />
  <feComposite operator="over" in="sepia-clip" in2="gscale"/>
</filter>

给你看上去是这样的：

​

​

这里的神奇之处在于feFuncA的设置--它控制着中音选择的宽度。" 0 .2 0.5 1 1 0 5 .2 0“是一个相当广泛的选择--因此，如果您希望在治疗败血症的情况下范围更窄，您可能需要使用"0 0 0 2 0 5 1 0 5 .2 0”之类的东西--一直玩到你喜欢的东西为止。

http://codepen.io/mullany/pen/rjdYre?editors=1000#

Answer 2

我不知道你是否看到了这个，但是存在一个feColorMatrix生成器：https://codepen.io/mullany/pen/qJCDk

你只需要改变你的形象：

<image x="0" y="0" width="590" height="400" filter="url(#f1)" xlink:href="[YOUR IMAGE]"/>

您可以使用Photoshop中的所有参数。享受(ﾉ≧∀≦)ﾉ)