stop

osbo.com | SVG | Elements | stop

The stop SVG element specifies the vector of colors to use in a gradient.

Specifies where the gradient stop is placed.

<number> | <percentage>

0

Specifies the color for the gradient stop.

currentColor | <color> <icccolor>

black

Specifies the opacity for the gradient stop.

<alpha-value>

1

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myid"> <stop/> <stop offset="0.25" stop-color="transparent"/> <stop offset="0.5"/> <stop offset="0.75" stop-color="transparent"/> <stop offset="1"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myid"> <stop/> <stop offset="25%" stop-color="transparent"/> <stop offset="50%"/> <stop offset="75%" stop-color="transparent"/> <stop offset="100%"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myid"> <stop/> <stop offset="25%" stop-color="red"/> <stop offset="50%" stop-color="green"/> <stop offset="75%" stop-color="blue"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> body { color: red; } </style> <defs> <linearGradient id="myid"> <stop/> <stop offset="25%" stop-color="currentColor"/> <stop offset="50%"/> <stop offset="75%" stop-color="currentColor"/> <stop offset="100%"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> @color-profile { name: myname; src: url(https://mydomain.com); } </style> <defs> <linearGradient id="myid"> <stop/> <stop offset="25%" stop-color="red icc-color(myname, 0.0, 0.0, 0.0, 0.0)"/> <stop offset="50%" stop-color="green icc-color(myname, 0.0, 0.0, 0.0, 0.0)"/> <stop offset="75%" stop-color="blue icc-color(myname, 0.0, 0.0, 0.0, 0.0)"/> <stop offset="100%" stop-color="yellow icc-color(myname, 0.0, 0.0, 0.0, 0.0)"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="myid"> <stop/> <stop offset="25%" stop-opacity="75%"/> <stop offset="50%" stop-opacity="50%"/> <stop offset="75%" stop-opacity="25%"/> <stop offset="100%" stop-opacity="0%"/> </linearGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

linearGradient

radialGradient

World Wide Web Consortium (W3C)