vector-effect CSS property

Syntax

/* Keywords */
vector-effect: none;
vector-effect: non-scaling-stroke;

/* Global values */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

none

Es werden keine Vektoreffekte auf das Element angewendet, was bedeutet, dass es vollständig von Transformationen betroffen ist, wie gewohnt.

non-scaling-stroke

Die gezeichnete Strichbreite des Elements wird physisch in der Größe gleich seiner definierten Strichbreite sein, selbst wenn das Element aufgrund von Transformationen entweder des Elements selbst oder seines Koordinatensystems vergrößert oder verkleinert wurde. Dies gilt sowohl für Skalierungen durch Transformationen als auch durch physische Größenänderung des gesamten Bildes.

Formale Syntax

vector-effect = 
  none                |
  non-scaling-stroke  |
  non-scaling-size    |
  non-rotation        |
  fixed-position      

Beispiele

Verhinderung der Skalierung von SVG-Strichen mit CSS

Hier beginnen wir mit einem 200x100 SVG-Bild, das zwei Rechtecke innerhalb 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="#ddeeff88">
    <rect x=" 60" y="20" width="30" height="60" />
    <rect x="110" y="20" width="30" height="60" class="thinned" />
  </g>
</svg>

Für dieses SVG-Bild setzen wir width: 500px, um es größer als seine intrinsische Größe zu machen, und legen das klassierte <rect> so fest, dass es nicht skalierte Striche hat.

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 weiterhin eine scheinbare Strichbreite von 3 hat, obwohl es auf die gleiche Weise vergrößert wurde wie das erste Rechteck.

Überschreiben von SVG-Strichskalierungswerten mit CSS

In diesem Fall beginnen wir mit einem ähnlichen SVG-Bild wie in dem vorherigen Beispiel. Hier wird das <g>-Element wie zuvor gedreht, jedoch 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="#ddeeff88">
    <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 vom CSS-Wert non-scaling-stroke überschrieben wird und dass die Vektoreffekte berücksichtigt werden, obwohl die Skalierung direkt auf das <rect> und nicht auf sein Elternelement <g> angewendet wurde.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• stroke
• <basic-shape> Datentyp
• SVG vector-effect Attribut