Css SVG深褐色滤镜效果:仅中音
您能帮我找出如何使用SVG在下面的链接中实现乌黑色调吗? 我尝试了以下代码:Css SVG深褐色滤镜效果:仅中音,css,svg,photoshop,svg-filters,Css,Svg,Photoshop,Svg Filters,您能帮我找出如何使用SVG在下面的链接中实现乌黑色调吗? 我尝试了以下代码: <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
<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>
但是,我得到的是非常不同的,似乎不仅仅是影响中间色调,因为它在Photoshop上
注意:我不能使用canvas。我不知道您是否看到了这一点,但存在一个feColorMatrix生成器: 您只需更改自己的图像:
<image x="0" y="0" width="590" height="400" filter="url(#f1)" xlink:href="[YOUR IMAGE]"/>
您可以像在Photoshop中一样使用所有参数。
享受(ノ≧∀≦)ノ 首先,这不是一个合适的深褐色滤光片。它只使用红色通道作为输入,所以你会损失大约三分之一的亮度。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>
给你的东西看起来像这样:
<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.20.5 1 1 0.5.2 0”是一个相当宽的选择——因此,如果你想在乌贼墨治疗的情况下缩小范围,你可能想使用类似“0 0 0 0.2 0.5 1 0.5 0.2 0 0 0”的东西——一直玩到你喜欢为止
您在这里使用的是什么UA?我使用谷歌Chrome作为用户代理。问题是feColorMatrix所做的颜色更改应用于所有色调…而不仅仅是我在前面提到的Photoshop等中间色调。这可能是因为web颜色有限。