Question

能帮助我了解如何使用SVG在链接下方获得棕褐色调？

My Sepia Tone made with Photoshop's Color Balance

我尝试过以下代码：

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

CSS：

NDK_TOOLCHAIN_VERSION

但是我得到的feColorMatrix Sepia Tone非常不同，并且似乎不会像在Photoshop上那样影响中间色调。

注意：我不能使用画布。

Answer 1

首先，这不是一个合适的棕褐色过滤器。它只使用红色通道作为输入，因此您将失去大约三分之一的光度。＆＃34;官方＆＃34; 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的设置 - 它控制中间色调选择的宽度。＆＃34; 0 .2 0.5 1 1 1 0.5 .2 0＆＃34;是一个相当广泛的选择 - 所以如果你想要一个较窄的范围给予棕褐色治疗，你可能想要使用类似＆＃34; 0 0 0 0.2 0.5 1 0.5 0.2 0 0 0＆＃34; - 玩它直到你有你喜欢的东西。

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中的所有参数。享受（ノ≧∀≦）ノ

SVG棕褐色滤镜效果：仅适用于中音

2 个答案: