SVGPatternElement: patternUnits-Eigenschaft

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 patternUnits schreibgeschützte Eigenschaft der SVGPatternElement-Schnittstelle spiegelt das patternUnits-Attribut des gegebenen <pattern>-Elements wider. Sie legt das Koordinatensystem für den Inhalt des Musters fest und nimmt einen der in SVGUnitTypes definierten Konstanten an.

Wert

Ein SVGAnimatedEnumeration-Objekt.

Beispiel

Für 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>

Können wir auf das patternUnits-Attribut zugreifen:

js
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

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGPatternElement__patternUnits

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch