[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/de/docs/Web/API/SVGPatternElement/patternContentUnits [Back]  [Original]

SVGPatternElement: patternContentUnits-Eigenschaft - Web-APIs | MDN

Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.

View in English Always switch to English

SVGPatternElement: patternContentUnits-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.

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

In diesem Artikel

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 knnen auf das patternContentUnits-Attribut zugreifen:

js
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-Kompatibilitt

Siehe auch


Web Proxy Viewer  |  New URL  |  Original Page