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

SVGPatternElement: height-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: height-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 height Eigenschaft der SVGPatternElement Schnittstelle, die nur gelesen werden kann, beschreibt die Hhe des Musters als ein SVGAnimatedLength. Sie spiegelt den berechneten Wert des height Attributs auf dem <pattern>-Element wider.

Der Attributwert kann ein \<length>, \<percentage> oder \<number> sein. Der numerische Wert des SVGAnimatedLength.baseVal reprsentiert die Hhe des Musters im Benutzerkoordinatensystem.

In diesem Artikel

Wert

Ein SVGAnimatedLength.

Beispiel

Gegeben das folgende SVG:

html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- First pattern -->
    <pattern
      id="pattern1"
      x="50"
      height="20"
      width="20"
      patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="blue" />
    </pattern>
    <!-- Second pattern -->
    <pattern
      id="pattern2"
      x="100"
      height="40"
      width="20"
      patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="red" />
    </pattern>
  </defs>
  <!-- Using the patterns -->
  <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 die berechneten Werte der x-Attribute zugreifen:

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

console.log(patterns[0].height.baseVal.value); // output: 20
console.log(patterns[1].height.baseVal.value); // output: 40

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2
# __svg__SVGPatternElement__height

Browser-Kompatibilitt

Siehe auch


Web Proxy Viewer  |  New URL  |  Original Page