SVG
Gradienty

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Szukaj…


Parametry

wspólny definicja
gradientUnits układ współrzędnych atrybutów gradientu. Albo objectBoundingBox lub userSpaceOnUse
gradientTransform transformacja stosowana do zawartości gradientu
spreadMethod określa, co dzieje się poza granicami gradientu. Albo pad, odbij lub powtórz
xlink: href link do innego gradientu, który zapewnia atrybuty lub treść
------ ------
Gradient liniowy Definicja
------ ------
x1 definiuje wektor gradientu
x2 patrz x1
y1 patrz x1
y2 patrz x1
------ ------
Gradient promieniowy Definicja
------ ------
cx współrzędna x zewnętrznego środka gradientu
cy współrzędna y zewnętrznego środka gradientu
r zewnętrzny promień gradientu. Lokalizacja 100% przystanku
fx współrzędna x wewnętrznego środka gradientu. Lokalizacja przystanku 0%
fy położenie y wewnętrznego środka gradientu. Lokalizacja przystanku 0%

Uwagi

W SVG rozróżniana jest wielkość liter, więc pamiętaj, aby używać dużej litery G na środku.

gradient liniowy

<svg>
  <defs>
        <linearGradient id='g' y1="100%" x2="100%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect width='100%' height='100%' fill='url(#g)'/>
</svg>

radialGradient

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="10%" stop-color="green" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect width='100%' height='100%' fill='url(#g)'/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow