slope

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das Attribut slope definiert Werte für lineare Filter, beispielsweise für die Helligkeit.

Das Attribut slope wird von untergeordneten Elementen der Filterprimitive <feComponentTransfer> unterstützt, darunter die feFunc-RGBA-Transferfunktionen. Wenn der type einer Transferfunktion linear ist, definiert slope die Steigung der linearen Funktion.

Sie können dieses Attribut mit den folgenden SVG-Elementen für Komponenten-Transferfunktionen verwenden, wenn type="linear" gesetzt ist:

Hinweis: Ursprünglich wurde das Attribut slope innerhalb von <font-face> verwendet, um den Winkel der vertikalen Striche einer Schriftart anzugeben. Diese Verwendung ist veraltet.

Beispiele

In diesem Beispiel werden auf zwei Textelemente in einem Feld mit Farbverlauf lineare Filter angewendet. Die Steigungen der Transferfunktionen der beiden Filter unterscheiden sich.

html

<svg
  width="8cm"
  height="4cm"
  viewBox="0 0 800 400"
  xmlns="http://www.w3.org/2000/svg">
  <title>Examples of feComponentTransfer operations</title>
  <desc>
    Text strings showing the effects of the slope attribute of the
    feComponentTransfer filter function linear options.
  </desc>
  <defs>
    <linearGradient
      id="MyGradient"
      gradientUnits="userSpaceOnUse"
      x1="100"
      y1="0"
      x2="600"
      y2="0">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <filter
      id="Linear1"
      filterUnits="objectBoundingBox"
      x="0%"
      y="0%"
      width="100%"
      height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="1" />
        <feFuncG type="linear" slope="1" />
        <feFuncB type="linear" slope="1" />
      </feComponentTransfer>
    </filter>
    <filter
      id="Linear2"
      filterUnits="objectBoundingBox"
      x="0%"
      y="0%"
      width="100%"
      height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5" />
        <feFuncG type="linear" slope="2.5" />
        <feFuncB type="linear" slope="5" />
      </feComponentTransfer>
    </filter>
  </defs>
  <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
  <g
    font-family="Verdana"
    font-size="100"
    font-weight="bold"
    fill="url(#MyGradient)">
    <text x="100" y="190" filter="url(#Linear1)">Slope1</text>
    <text x="100" y="290" filter="url(#Linear2)">Slope2</text>
  </g>
</svg>

Verwendungshinweise

Wert	`<number>`
Standardwert	`1`
Animierbar	Ja

<number>: Dieser Wert gibt die Steigung der linearen Komponenten-Transferfunktionen an.

Spezifikationen

Spezifikation
Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-slope

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden