SVGPatternElement: width-Eigenschaft

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 width-Schreibgeschützte Eigenschaft der SVGPatternElement-Schnittstelle beschreibt die Breite des Musters als ein SVGAnimatedLength. Sie spiegelt den berechneten Wert des width-Attributs auf dem <pattern>-Element wider.

Der Attributwert kann ein \<length>, \<percentage>, oder \<number> sein. Der numerische Wert des SVGAnimatedLength.baseVal repräsentiert die Breite des Musters im Benutzerkoordinatensystem.

In diesem Artikel

Wert

Ein SVGAnimatedLength.

Beispiel

Im folgenden 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="40"
      patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" 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>

Können wir auf die berechneten Werte der x-Attribute zugreifen:

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

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

Spezifikationen

Spezifikation

Scalable Vector Graphics (SVG) 2
# __svg__SVGPatternElement__width

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

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

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden