SVG
Sfumature

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


Parametri

Comune definizione
gradientUnits il sistema di coordinate degli attributi del gradiente. O objectBoundingBox o userSpaceOnUse
gradientTransform la trasformazione da applicare ai contenuti del gradiente
spreadMethod definisce cosa succede al di fuori dei confini del gradiente. O pad, riflettere o ripetere
xlink: href link a un altro gradiente che fornisce attributi o contenuti
------ ------
Gradiente lineare Definizione
------ ------
x1 definisce il vettore del gradiente
x2 vedi x1
Y1 vedi x1
y2 vedi x1
------ ------
Gradiente radiale Definizione
------ ------
cx la coordinata x del centro del gradiente esterno
cy la coordinata y del centro del gradiente esterno
r il raggio esterno del gradiente. La posizione di una fermata al 100%
fx la coordinata x del centro del gradiente interno. La posizione di una fermata dello 0%
fy la posizione y del centro del gradiente interno. La posizione di una fermata dello 0%

Osservazioni

SVG fa distinzione tra maiuscole e minuscole quindi ricorda di usare una G maiuscola nel mezzo.

linearGradient

<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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow