Színátmenet

• Szerző: Sallai András
• Copyright © 2011, Sallai András
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg 	xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			version="1.1"
			width="800" 
			height="600">
 
 
<defs>
<linearGradient id="atmenet">
	<stop offset="0%" style="stop-color: blue;"/>
	<stop offset="100%" style="stop-color: yellow;"/>
</linearGradient>
</defs>
 
<rect x="155" y="270" width="280" height="5" 
	style="fill:url(#atmenet);"/>
 
</svg>

Az átmenet irányát nem adtuk, meg mert ez az alapértelmezett:

<linearGradient id="atmenet" x1="0%" y1="0%" x2="0%" y2="100%">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC 
	"-//W3//DTD SVG 1.1//EN" 
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg	xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			version="1.1" width="800" height="600">
 
<defs>
	<linearGradient id="atmenet" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:blue;" />
			<stop offset="100%" style="stop-color:yellow;" />			
	</linearGradient>
 
</defs>
 
<ellipse cx="300" cy="350" rx="160" ry="130" fill="url(#atmenet)" />
 
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC 
	"-//W3//DTD SVG 1.1//EN" 
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg	xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			version="1.1" width="800" height="600">
 
<defs>
	<linearGradient id="atmenet" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:blue;" />
			<stop offset="100%" style="stop-color:yellow;" />			
	</linearGradient>
 
</defs>
 
<ellipse cx="300" cy="350" rx="160" ry="130" fill="url(#atmenet)" />
<text fill="white" font-size="50" font-family="Veranda" x="180" y="350">SVG átmenet</text>
 
</svg>