gradientUnits
Das gradientUnits
Attribut definiert das Koordinatensystem, das für auf die Gradientelemente spezifizierte Attribute verwendet wird.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
linearGradient
Für <linearGradient>
definiert gradientUnits
das Koordinatensystem, das für die Attribute x1
, y1
, x2
und y2
verwendet wird.
Wert | userSpaceOnUse | objectBoundingBox |
---|---|
Standardwert | objectBoundingBox |
Animierbar | Ja |
userSpaceOnUse
-
Dieser Wert gibt an, dass die Attribute Werte im Koordinatensystem darstellen, das aus der aktuellen Benutzerkoordinatensystem resultiert, das zu dem Zeitpunkt vorhanden ist, wenn das Gradientelement referenziert wird (d.h. das Benutzerkoordinatensystem für das Element, das das Gradientelement über eine
fill
oderstroke
Eigenschaft referenziert) und dann die durch das AttributgradientTransform
spezifizierte Transformation anwendet. Prozentsätze stellen Werte relativ zum aktuellen SVG-Viewport dar. objectBoundingBox
-
Dieser Wert gibt an, dass das Benutzerkoordinatensystem für die Attribute unter Verwendung der Begrenzungsrahmen des Elements, auf das der Verlauf angewendet wird, etabliert wird und dann die durch das Attribut
gradientTransform
spezifizierte Transformation anwendet.Prozentsätze stellen Werte relativ zum Begrenzungsrahmen des Objekts dar.
Mit diesem Wert und
gradientTransform
als Identitätsmatrix ist die Normale des linearen Verlaufs senkrecht zum Gradientenvektor im Objekt-Begrenzungsrahmenraum (d.h. dem abstrakten Koordinatensystem, in dem (0,0) oben/links des Objektbegrenzungsrahmens und (1,1) unten/rechts des Objektbegrenzungsrahmens ist). Wenn der Begrenzungsrahmen des Objekts nicht quadratisch ist, kann die Gradienten-Normale, die zunächst senkrecht zum Gradientenvektor innerhalb des Objektbegrenzungsrahmenraums ist, nicht senkrecht relativ zum Gradientenvektor im Benutzerraum sein. Wenn der Gradientenvektor parallel zu einer der Achsen des Begrenzungsrahmens ist, bleibt die Gradienten-Normale senkrecht. Diese Transformation ergibt sich aus der Anwendung der nicht uniformen Skalentransformation vom Begrenzungsrahmenraum zum Benutzerraum.
radialGradient
Für <radialGradient>
definiert gradientUnits
das Koordinatensystem, das für die Attribute cx
, cy
, r
, fx
, fy
, und fr
verwendet wird.
Wert | userSpaceOnUse | objectBoundingBox |
---|---|
Standardwert | objectBoundingBox |
Animierbar | Ja |
userSpaceOnUse
-
cx
,cy
,r
,fx
,fy
, undfr
repräsentieren Werte im Koordinatensystem, das daraus resultiert, dass das aktuelle Benutzerkoordinatensystem verwendet wird, das zum Zeitpunkt, wenn das Gradientelement referenziert wird, vorhanden ist (d.h. das Benutzerkoordinatensystem für das Element, das das Gradientelement über einefill
oderstroke
Eigenschaft referenziert) und dann die durch das AttributgradientTransform
spezifizierte Transformation anwendet. objectBoundingBox
-
Für
<radialGradient>
: Das Benutzerkoordinatensystem für die Attributecx
,cy
,r
,fx
,fy
, undfr
wird unter Verwendung des Begrenzungsrahmens des Elements, auf das der Verlauf angewendet wird, etabliert (siehe Objektbegrenzungsrahmeneinheiten) und dann die durch das AttributgradientTransform
spezifizierte Transformation anwendet. Mit diesem Wert undgradientTransform
als Identitätsmatrix sind die Ringe des radialen Verlaufs in Bezug auf den Objektbegrenzungsrahmenraum kreisförmig (d.h. das abstrakte Koordinatensystem, bei dem (0,0) oben/links des Objektbegrenzungsrahmens und (1,1) unten/rechts des Objektbegrenzungsrahmens ist). Wenn der Begrenzungsrahmen des Objekts nicht quadratisch ist, werden die konzeptionell kreisförmigen Ringe innerhalb des Objektbegrenzungsrahmenraums aufgrund der Anwendung der nicht uniformen Skalentransformation vom Begrenzungsrahmenraum zum Benutzerraum als elliptisch dargestellt.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # LinearGradientElementGradientUnitsAttribute |
Scalable Vector Graphics (SVG) 2 # RadialGradientElementGradientUnitsAttribute |
Browser-Kompatibilität
svg.elements.linearGradient.gradientUnits
BCD tables only load in the browser
svg.elements.radialGradient.gradientUnits
BCD tables only load in the browser