SVG 棕褐色滤镜效果：仅中间调

Question

你能帮我看看如何使用 SVG 在 link 波纹管上实现棕褐色调吗？

My Sepia Tone made with Photoshop's Color Balance

我试过以下代码：

<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 Sepia Tone 非常不同，似乎不像在 Photoshop 上那样只影响中间色调。

注意：我无法使用canvas。

Answer 1

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

你只需要改变你的形象:

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

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

Answer 2

首先，这不是合适的棕褐色滤镜。它仅使用红色通道作为输入，因此您立即损失了大约三分之一的光度。 "official" 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" />

这给了你这个结果：

如果你只想处理mid-tones那么你需要把mid-tones拉出来单独处理。看起来像这样：

<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 的设置 - 它控制 mid-tone 选择的宽度。 “0 .2 0.5 1 1 1 0.5 .2 0”是一个相当广泛的选择 - 所以如果你想要一个更窄的范围给棕褐色处理，你可能想要使用像“0 0 0 0.2 0.5 1 0.5 0.2 0 0 0 “ - 玩它直到你有你喜欢的东西。

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

SVG 棕褐色滤镜效果：仅中间调

SVG Sepia filter effect: mid-tones only

css

photoshop

svg

svg-filters