vector-effect
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.
Die vector-effect
CSS Eigenschaft unterdrückt bestimmte Transformationseffekte in SVG und ermöglicht so, dass Effekte wie eine Straße auf einer Karte unabhängig vom Zoom dieselbe Breite behalten, oder dass eine Diagrammlegende unabhängig von anderen Transformationen ihre Position und Größe beibehält. Sie kann nur mit SVG-Elementen verwendet werden, die das vector-effect
Attribut akzeptieren. Wird sie verwendet, überschreibt der CSS-Wert alle Werte des vector-effect
Attributs des Elements.
Syntax
/* Keywords */
vector-effect: none;
vector-effect: non-scaling-stroke;
vector-effect: non-scaling-size;
vector-effect: non-rotation;
vector-effect: fixed-position;
/* Global values */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;
Werte
none
-
Keine Vektoreffekte werden auf das Element angewendet, was bedeutet, dass es vollständig wie gewohnt von Transformationen betroffen ist.
non-scaling-stroke
-
Die gezeichnete Strichbreite des Elements entspricht physisch der definierten Strichbreite, selbst wenn das Element aufgrund von Transformationen entweder des Elements selbst oder seines Koordinatensystems vergrößert oder verkleinert wurde. Dies gilt sowohl bei Transformationen als auch bei physischer Größenänderung des gesamten Bildes.
non-scaling-size
Experimentell-
Das Element ignoriert die Effekte von Skalierungstransformationen.
non-rotation
Experimentell-
Das Element ignoriert die Effekte von Rotationsveränderungen.
fixed-position
Experimentell-
Das Element ignoriert die Effekte von Übersetzungstransformationen.
Formale Syntax
Beispiele
Verhindern der Skalierung von SVG-Strichen mit CSS
Hier beginnen wir mit einem 200x100 SVG-Bild, das zwei Rechtecke in einer Gruppe enthält. Die Gruppe wird vergrößert und gedreht. Das zweite der beiden Rechtecke hat die Klasse thinned
.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<g
transform="scale(2.3) rotate(23)"
transform-origin="100 50"
stroke-width="3"
stroke="orange"
fill="#DEF8">
<rect x=" 60" y="20" width="30" height="60" />
<rect x="110" y="20" width="30" height="60" class="thinned" />
</g>
</svg>
Bei diesem SVG-Bild wenden wir width: 500px
an, um es größer als seine intrinsische Größe zu machen, und setzen das mit einer Klasse versehene <rect>
auf nicht skalierte Striche.
svg {
width: 500px;
}
svg rect.thinned {
vector-effect: non-scaling-stroke;
}
Das Ergebnis ist, dass das erste der beiden Rechtecke eine scheinbare (visuelle) Strichbreite von ungefähr 17 hat, während das zweite Rechteck trotz gleicher Skalierung wie das erste eine scheinbare Strichbreite von 3 beibehält.
Überschreiben von SVG-Streichskalierungswerten mit CSS
In diesem Fall beginnen wir mit einem ähnlichen SVG-Bild wie im vorherigen Beispiel. Hier wird das <g>
Element wie zuvor rotiert, aber es wird keine Skalierung darauf angewendet. Die <rect>
Elemente haben einen gemeinsamen Ursprung für ihre Transformationen und ihre vector-effect
SVG-Attribute sind auf den Wert none
gesetzt.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<g
transform="rotate(23)"
transform-origin="100 50"
stroke-width="3"
stroke="orange"
fill="#DEF8">
<rect
x=" 60"
y="20"
width="30"
height="60"
transform-origin="100 50"
vector-effect="none" />
<rect
x="110"
y="20"
width="30"
height="60"
transform-origin="100 50"
vector-effect="none"
class="thinned" />
</g>
</svg>
Wie zuvor wird das SVG mit CSS größer als seine intrinsische Größe gemacht. Diesmal wird die Skalierung direkt auf die <rect>
Elemente angewendet, und das zweite Rechteck wird so eingestellt, dass seine Striche nicht skaliert werden.
svg {
width: 500px;
}
svg rect {
transform: scale(2.3);
}
svg rect.thinned {
vector-effect: non-scaling-stroke;
}
Das Ergebnis ist visuell identisch mit dem des vorherigen Beispiels. Was wir sehen, ist, dass der Attributwert none
von dem CSS-Wert non-scaling-stroke
überschrieben wird und dass die Vektoreffekte berücksichtigt werden, obwohl die Skalierung direkt am <rect>
statt an seinem übergeordneten <g>
Element vorgenommen wurde.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # VectorEffectProperty |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
stroke
<basic-shape>
Datentyp- SVG
vector-effect
Attribut