将CSSgram Instagram Willow过滤器转换为SVG过滤器
我正在尝试将以下内容转换为SVG过滤器将CSSgram Instagram Willow过滤器转换为SVG过滤器,css,svg,svg-filters,radial-gradients,css-filters,Css,Svg,Svg Filters,Radial Gradients,Css Filters,我正在尝试将以下内容转换为SVG过滤器 .willow{ 位置:相对位置; -webkit过滤器:灰度(0.5)对比度(0.95)亮度(0.9); 滤镜:灰度(0.5)对比度(0.95)亮度(0.9);} 杨柳先生{ 宽度:100%; z-索引:1;} .威洛:以前{ 内容:''; 显示:块; 身高:100%; 宽度:100%; 排名:0; 左:0; 位置:绝对位置; 指针事件:无; z-索引:2;} .威洛:之后{ 内容:''; 显示:块; 身高:100%; 宽度:100%; 排名:0; 左:
.willow{
位置:相对位置;
-webkit过滤器:灰度(0.5)对比度(0.95)亮度(0.9);
滤镜:灰度(0.5)对比度(0.95)亮度(0.9);}
杨柳先生{
宽度:100%;
z-索引:1;}
.威洛:以前{
内容:'';
显示:块;
身高:100%;
宽度:100%;
排名:0;
左:0;
位置:绝对位置;
指针事件:无;
z-索引:2;}
.威洛:之后{
内容:'';
显示:块;
身高:100%;
宽度:100%;
排名:0;
左:0;
位置:绝对位置;
指针事件:无;
z-索引:3;}
柳树:以前{
背景颜色:径向渐变(40%,圆形,#d4a9af 55%,黑色150%);
混合混合模式:叠加;}
威洛先生:之后{
背景色:#d8cdcb;
混合模式:颜色;}
这就是我目前所拥有的
复制覆盖是困难的,但也是可能的。您只需执行我在此处创建的硬滤光器的相反操作:。但无法复制SVG过滤器中的混合模式:颜色。@MichaelMullany“复制覆盖”是什么意思?我不明白这和我的问题有什么关系。请您详细解释一下,我的意思是将混合模式:叠加转换为SVG过滤器。
<radialGradient id="gradient_willow" cx="40%">
<stop offset="55%" stop-color="#d4a9af" stop-opacity="0%"/>
<stop offset="150%" stop-color="black" stop-opacity="0%"/>
</radialGradient>
<!-- Create a rectangle and apply the gradient as its fill -->
<rect id="willowsc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_willow)" fill-opacity="1"/>
<filter id="willow">
<!-- grayscale 0.5 -->
<feColorMatrix type="matrix"
values="0,6063 0.3576 0.0361 0 0
0.1063 0.8576 0.0361 0 0
0.1063 0.3576 0.5361 0 0
0 0 0 1 0"/>
<!-- contrast -->
<feComponentTransfer>
<feFuncR type="linear" slope="0.95" intercept="0,025"/>
<feFuncG type="linear" slope="0.95" intercept="0,025"/>
<feFuncB type="linear" slope="0.95" intercept="0,025"/>
</feComponentTransfer>
<!-- brightness -->
<feComponentTransfer>
<feFuncR type="linear" slope="0.9"/>
<feFuncG type="linear" slope="0.9"/>
<feFuncB type="linear" slope="0.9"/>
</feComponentTransfer>
<!-- blend mode -->
<feImage xlink:href="#willowsc" result="grad" x="0" y="0"/>
<feBlend mode="overlay" in="SourceGraphic" />
<feFlood flood-color="#d8cdcb"/>
<feBlend mode="color" in="SourceGraphic" />
</filter>