SVG
Verlopen

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


parameters

gemeenschappelijk definitie
gradientUnits het coördinatensysteem van de verloopkenmerken. Of objectBoundingBox of userSpaceOnUse
gradientTransform de transformatie die moet worden toegepast op de gradiëntinhoud
spreadMethod definieert wat er buiten de gradiëntgrenzen gebeurt. Of pad, reflecteren of herhalen
xlink: href link naar een ander verloop dat attributen of inhoud biedt
------ ------
Lineair verloop Definitie
------ ------
x1 definieert de verloopvector
x2 zie x1
y1 zie x1
y2 zie x1
------ ------
Radiaal verloop Definitie
------ ------
cx de x-coördinaat van het middelste verloop
cy de y-coördinaat van het middelste verloop
r de buitenste straal van het verloop. De locatie van een 100% stop
fx de x-coördinaat van het middelste verloop van de gradiënt. De locatie van een stop van 0%
foei de y-locatie van het middelste verloop. De locatie van een stop van 0%

Opmerkingen

SVG is hoofdlettergevoelig, dus vergeet niet om een hoofdletter G in het midden te gebruiken.

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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow