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文档，但还没有找到有效的示例。 / p>

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

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>