< SVG

Színátmenet

Szerző: Sallai András

Copyright © 2011, Sallai András

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Egyszerű színátmenet

<?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%">

Függőleges átmenet

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

Függőleges átmenet szövegel

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