Gradient promienisty SVG
- Poprzednia strona Gradient liniowy SVG
- Następna strona Przykład SVG
Gradienty SVG muszą być zdefiniowane wewnątrz etykiety <defs>.
Gradienty promieniste
Etykieta <radialGradient> jest używana do definiowania gradientów promienistych.
Etykieta <radialGradient> musi być umieszczona wewnątrz etykiety <defs>. Etykieta <defs> jest skrótem od definitions i pozwala na definicję specjalnych elementów, takich jak gradienty.
Skopiuj poniższy kod do notatnika i zapisz plik jako "radial1.svg". Umieść ten plik w katalogu internetowym:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>
Wyjaśnienie kodu:
Atrybut id etykiety <radialGradient> może przypisać unikalną nazwę gradientowi, a atrybut fill:url(#grey_blue) łączy element elipsy z tym gradientem, a atrybuty cx, cy i r definiują zewnętrzny obwód, podczas gdy fx i fy definiują wewnętrzny obwód Zakres gradientu kolorów może być złożony z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą etykiety <stop>. Atrybut offset określa początek i koniec gradientu.Jednym z przykładów jest:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>
- Poprzednia strona Gradient liniowy SVG
- Następna strona Przykład SVG