SVG
Farbverläufe

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


Parameter

verbreitet Definition
gradientUnits das Koordinatensystem der Gradientenattribute. Entweder objectBoundingBox oder userSpaceOnUse
gradientTransform die Transformation, die auf den Gradienteninhalt angewendet werden soll
spreadMethod definiert, was außerhalb der Verlaufsgrenzen geschieht. Entweder auffüllen, reflektieren oder wiederholen
xlink: href Verknüpfung zu einem anderen Farbverlauf, der Attribute oder Inhalte bereitstellt
------ ------
Linearer Verlauf Definition
------ ------
x1 Definiert den Gradientenvektor
x2 siehe x1
y1 siehe x1
y2 siehe x1
------ ------
Radialer Farbverlauf Definition
------ ------
cx die x-Koordinate des äußeren Gradientenzentrums
cy die y-Koordinate des äußeren Gradientenzentrums
r der äußere Radius der Steigung. Die Position einer 100% igen Haltestelle
fx die x-Koordinate des inneren Gradientenzentrums. Die Position eines 0% igen Stopps
fy die y-Position des inneren Gradientenzentrums. Die Position eines 0% igen Stopps

Bemerkungen

Bei SVG wird zwischen Groß- und Kleinschreibung unterschieden. Denken Sie daran, in der Mitte ein G zu verwenden.

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
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow