gradientTransform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das gradientTransform-Attribut enthält die Definition einer optionalen zusätzlichen Transformation vom Gradienten-Koordinatensystem auf das Ziel-Koordinatensystem (z. B. userSpaceOnUse oder objectBoundingBox). Dies ermöglicht beispielsweise das Schrägstellen des Gradienten. Diese zusätzliche Transformationsmatrix wird nachträglich in die (d. h. rechts von) zuvor definierten Transformationen eingefügt, einschließlich der impliziten Transformation, die erforderlich ist, um von Einheiten des Objektumrandungsrahmens in den Benutzerbereich überzugehen.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient
    id="gradient1"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <radialGradient
    id="gradient2"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100"
    gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>

  <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
  <rect
    x="0"
    y="0"
    width="200"
    height="200"
    fill="url(#gradient2)"
    style="transform: translateX(220px);" />
</svg>

Verwendungshinweise

Standardwert	Identitätstransformation
Wert	`<transform-list>`
Animierbar	Ja

<transform-list> -: Eine Liste von Transformationsfunktionen, die eine zusätzliche Transformation vom Gradienten-Koordinatensystem auf das Ziel-Koordinatensystem spezifizieren.

Spezifikationen

Specification
CSS Transforms Module Level 1 # typedef-transform-list
Scalable Vector Graphics (SVG) 2 # LinearGradientElementGradientTransformAttribute
Scalable Vector Graphics (SVG) 2 # RadialGradientElementGradientTransformAttribute

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

<transform-function>