Signatur
Beschreibung
Die Eigenschaft height der Schnittstelle SVGPatternElement spiegelt das Attribut height eines <pattern>-Elements wider. Zusammen mit x, y und width legt dieses Attribut die Kachel fest, die beim Füllen einer Form wiederholt wird.
Die Eigenschaft selbst ist schreibgeschützt. Sie gibt ein SVGAnimatedLength-Objekt zurück, das nicht direkt eine Zahl ist. Der statische Wert steckt in height.baseVal, der aktuelle, eventuell durch SMIL-Animation veränderte Wert in height.animVal. Beide sind vom Typ SVGLength. Über baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits() kannst du den Wert lesen und ändern.
Wie der Wert gedeutet wird, hängt von patternUnits ab. Beim Standard objectBoundingBox ist height ein Anteil an der Höhe der gefüllten Form (z. B. 0.25). Bei userSpaceOnUse ist es eine Länge im Benutzerkoordinatensystem. Die Eigenschaft ist nützlich, wenn du Muster zur Laufzeit skalieren willst, etwa für Zoom, responsive Grafiken oder interaktive Rasteranzeigen.
Rückgabewert
baseVal (Attributwert als SVGLength, beschreibbar) und animVal (aktueller animierter Wert, nur lesbar). Fehlt das Attribut, gilt der Wert 0. Dann wird das Muster nicht gezeichnet.Beispiele
Höhe eines Musters auslesen
// <svg><defs><pattern id="raster" width="20" height="20" patternUnits="userSpaceOnUse">…</pattern></defs></svg>
const pattern = document.getElementById('raster');
const { baseVal, animVal } = pattern.height;
console.log(baseVal.value); // Zahl in Benutzereinheiten
console.log(baseVal.valueAsString); // Originalschreibweise
console.log(animVal.value); // aktueller (ggf. animierter) WertMusterkachel beim Zoomen dynamisch skalieren
const pattern = document.querySelector('#raster');
const zoomInput = document.querySelector('#zoom'); // <input type="range" min="5" max="80">
zoomInput.addEventListener('input', () => {
const size = Number(zoomInput.value);
// Über baseVal schreiben – pattern.height selbst ist schreibgeschützt
pattern.width.baseVal.value = size;
pattern.height.baseVal.value = size;
console.log(`Kachelgröße: ${size}×${pattern.height.baseVal.value}`);
});Muster per Skript erzeugen und relative Höhe setzen
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(SVG_NS, 'defs'));
const pattern = document.createElementNS(SVG_NS, 'pattern');
pattern.id = 'streifen';
// Standard patternUnits=objectBoundingBox → Anteile der Form
pattern.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 1);
pattern.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 0.25);
const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('width', '1');
rect.setAttribute('height', '0.125');
rect.setAttribute('fill', 'steelblue');
pattern.append(rect);
// Inhalt ebenfalls in Bounding-Box-Einheiten
pattern.setAttribute('patternContentUnits', 'objectBoundingBox');
defs.append(pattern);
console.log(pattern.getAttribute('height'));// Wichtig · Fallstricke
- Kein direktes Zuweisen:
pattern.height = 50hat keine Wirkung, im Strict Mode wird einTypeErrorgeworfen. Schreibe stattdessenpattern.height.baseVal.valueoder nutzesetAttribute('height', …). animValist nur lesbar: Schreibzugriffe darauf werfen einen Fehler (NoModificationAllowedError).- Einheiten beachten: Bei
patternUnits="objectBoundingBox"(Standard) gibtbaseVal.valueeinen Anteil zurück, z. B.0.25, keine Pixel. Prozentwerte wie"10%"werden erst umgerechnet, wenn das Element gerendert ist.baseVal.valuekann daher bei nicht eingehängten Elementen unerwartet ausfallen. - Höhe 0 oder negativ: Bei
0wird das Muster nicht gezeichnet. Negative Werte sind ein Fehler. - Vererbung über
href: Übernimmt ein Muster seine Attribute perhrefvon einem anderen Muster, spiegeltheightnur das eigene Attribut wider, nicht den geerbten Wert. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).