SVGPatternElement: patternContentUnits-Eigenschaft - Web-APIs

SVGPatternElement: patternContentUnits-Eigenschaft - Web-APIs | MDN

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die schreibgeschützte Eigenschaft patternContentUnits des SVGPatternElement-Interfaces spiegelt das Attribut patternContentUnits des gegebenen <pattern>-Elements wider. Sie gibt das Koordinatensystem für den Musterinhalt an und nimmt einen der in SVGUnitTypes definierten Konstanten an.

Wert

Ein SVGAnimatedEnumeration-Objekt.

Beispiel

Angenommen, folgendes SVG:

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern
      id="pattern1"
      width="10"
      height="10"
      patternContentUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="5" fill="blue" />
    </pattern>
    <pattern
      id="pattern2"
      width="10"
      height="10"
      patternContentUnits="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>

Wir können auf das patternContentUnits-Attribut zugreifen:

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

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

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternContentUnits

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.