SVG - dégradé

[Xenos]

Mais bien sûr que si, cela marche sur tout élément dès l'instant où il est traitable par SVG, où la zone blanche (de la forme de initiale) représente la frontière et la zone noire (de la forme de initiale) l'intérieur de l'objet.

<?xml version="1.0" encoding="utf-8"?>



<svg

	version="1.1"

	viewBox="0 0 30 30"

	preserveAspectRatio="xMidYMax meet"

	class=""

	xmlns="http://www.w3.org/2000/svg"

	xmlns:xlink="http://www.w3.org/1999/xlink">



	<defs>

		<filter id="dropshadow">

			<feFlood        flood-color="#ff0000"            result="glowcolor"/>

			<feFlood        flood-color="transparent"    	result="fillcolor"/>

			<feFlood        flood-color="#0000ff"               result="strokecolor"/>



			<feGaussianBlur    stdDeviation="2"    in="SourceGraphic"    result="glow0"/>

			<feComposite    in="glow0"            in2="SourceAlpha"    operator="in"    result="glow1"    />

			<feColorMatrix    in="glow1"             values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 1 1 0 0"    result="glow2"/>

			<feComposite    in="glowcolor"        in2="glow2"        operator="in"    result="glow"/>



			<feComposite    in="fillcolor"        in2="SourceGraphic"    operator="in"    result="fill"/>

			<feColorMatrix    in="SourceGraphic"    type="luminanceToAlpha"             result="strokealpha"/>

			<feComposite    in="strokecolor"        in2="strokealpha"    operator="in"    result="stroke"/>

			<feMerge>

				<feMergeNode     in="fill"/>

				<feMergeNode    in="glow"/>

				<feMergeNode     in="stroke"/>

			</feMerge>

		</filter>

	</defs>

	<circle cx="15" cy="15" r="10" style="filter:url(#dropshadow);fill:black;stroke:white;"/>

</svg>

RTFM