1

I am starting to play with svg effects and animations and i found great example of how to apply blur effect to a svg path, but i have no idea how to set desired color instead of default black one.

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

As you can see in the included snippet i wanted to add lets say some green code of color to apply it as a blur color instead of black one, i was playing a little bit with svg docs but havent found working example.

Maybe someone could show how to implement color set in here ;)

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

2

In order to add color to your shadow you need to use . In this example the shadow is white.

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.