代码之家 › 专栏 › 技术社区 › Mevia

svg模糊效果,设置特定颜色

svg-filters svg css3 css

1

Mevia · 技术社区 · 7 年前

<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>

1 回复 | 直到 7 年前

1

2

enxaneta 7 年前

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

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>