css - svg 模糊效果，设置特定颜色

Question

我开始玩 svg 效果和动画，我发现了一个很好的例子，说明如何将模糊效果应用于 svg 路径，但我不知道如何设置所需的颜色而不是默认的黑色。

<defs>
    <filter id="dropShadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
        <feOffset dx="2" dy="4" />
        <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</defs>

正如您在包含的片段中看到的那样，我想添加一些绿色代码以将其应用为模糊颜色而不是黑色，我正在玩一些 svg 文档，但还没有找到工作示例。

也许有人可以在这里展示如何实现颜色设置；)

var screenCorners = [
    [50., 150.], 
    [450., 150.],
    [350., 50.],
    [ 150., 50.]
];

document.querySelector('#trapezoid').setAttribute('d', `
	M ${screenCorners[0][0]} ${screenCorners[0][1]}
	L ${screenCorners[1][0]} ${screenCorners[1][1]}
	L ${screenCorners[2][0]} ${screenCorners[2][1]}
	L ${screenCorners[3][0]} ${screenCorners[3][1]}
	Z
`);

body {
	background:#333;
}

svg {
	width:500px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
}

#trapezoid {
	fill:none;
  stroke:white;
}

<svg id="demo">
	<defs>
		<filter id="dropShadow">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
			<feOffset dx="2" dy="4" />
			<feMerge>
				<feMergeNode />
				<feMergeNode in="SourceGraphic" />
			</feMerge>
		</filter>
	</defs>
	<path id="trapezoid" filter="url(#dropShadow)"></path>
</svg>

Answer 1

为了给你的阴影添加颜色，你需要使用 .在这个例子中，阴影是白色的。

var screenCorners = [
    [50., 150.], 
    [450., 150.],
    [350., 50.],
    [ 150., 50.]
];

document.querySelector('#trapezoid').setAttribute('d', `
	M ${screenCorners[0][0]} ${screenCorners[0][1]}
	L ${screenCorners[1][0]} ${screenCorners[1][1]}
	L ${screenCorners[2][0]} ${screenCorners[2][1]}
	L ${screenCorners[3][0]} ${screenCorners[3][1]}
	Z
`);

body {
	background:#333;
}

svg {
	width:500px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
}

#trapezoid {
	fill:none;
  stroke:white;
}

<svg id="demo">
	<defs>
		<filter id="dropShadow">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur1" />
      <feFlood flood-color="white" result="color"/>
      <feComposite in="color" in2="blur1" operator="in" result="sombra" />
			<feOffset dx="2" dy="4" />
			<feMerge>
				<feMergeNode />
				<feMergeNode in="SourceGraphic" />
			</feMerge>
		</filter>
    
	</defs>
	<path id="trapezoid" filter="url(#dropShadow)"></path>
</svg>