эффект размытия SVG, установить определенный цвет - PullRequest
Новая
       7

эффект размытия SVG, установить определенный цвет

0 голосов
/ 27 сентября 2018

Я начинаю играть с 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 docs, но не нашел рабочего примера.

Может быть, кто-то мог бы показать, как реализовать здесь цвет;) 

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 Ответ

0 голосов
/ 27 сентября 2018

Чтобы добавить цвет к вашей тени, вам нужно использовать.В этом примере тень белая. 

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