SVGPatternElement: patternUnits-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die patternUnits schreibgeschtzte Eigenschaft der SVGPatternElement-Schnittstelle spiegelt das patternUnits-Attribut des gegebenen <pattern>-Elements wider. Sie legt das Koordinatensystem fr den Inhalt des Musters fest und nimmt einen der in SVGUnitTypes definierten Konstanten an.

Wert

Ein SVGAnimatedEnumeration-Objekt.

Beispiel

Fr folgendes SVG:

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern1" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="5" fill="blue" />
    </pattern>
    <pattern
      id="pattern2"
      width="10"
      height="10"
      patternUnits="objectBoundingBox">
      <circle cx="5" cy="5" r="5" fill="red" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
  <rect x="100" y="0" width="100" height="100" fill="url(#pattern2)" />
</svg>

Knnen wir auf das patternUnits-Attribut zugreifen:

const patterns = document.querySelectorAll("pattern");

console.log(patterns[0].patternUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE)
console.log(patterns[1].patternUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX)

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternUnits

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden