Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将CSSgram Instagram Willow过滤器转换为SVG过滤器_Css_Svg_Svg Filters_Radial Gradients_Css Filters - Fatal编程技术网

将CSSgram Instagram Willow过滤器转换为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; 左:

我正在尝试将以下内容转换为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;
左: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>