SVG
gradienter

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Sök…


parametrar

allmänning definition
gradientUnits koordinatsystemet för gradientattributen. Antingen objectBoundingBox eller userSpaceOnUse
gradientTransform transformen för att tillämpas på gradientinnehållet
spread definierar vad som händer utanför gradientgränserna. Antingen pad, reflektera eller upprepa
XLink: href länk till en annan gradient som tillhandahåller attribut eller innehåll
------ ------
Linjär lutning Definition
------ ------
x1 definierar lutningsvektorn
x2 se x1
y1 se x1
y2 se x1
------ ------
Radiell lutning Definition
------ ------
cx x-koordinaten för det yttre lutningscentret
cy y-koordinaten för det yttre lutningscentret
r lutningens yttre radie. Platsen för ett 100% stopp
fx x-koordinaten för det inre gradientcentret. Platsen för ett stopp på 0%
fy y-platsen för det inre gradientcentret. Platsen för ett stopp på 0%

Anmärkningar

SVG är skiftlägeskänsligt så kom ihåg att använda ett stort G i mitten.

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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow