SVGPatternElement: height-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die height Eigenschaft der SVGPatternElement Schnittstelle, die nur gelesen werden kann, beschreibt die Höhe 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 repräsentiert die Höhe des Musters im Benutzerkoordinatensystem.
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 können 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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__height |
Browser-Kompatibilität
Loading…