Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
SVGPatternElement: x-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 x Schreibgeschützte Eigenschaft der SVGPatternElement Schnittstelle beschreibt die x-Achsen-Koordinate des Startpunkts des Musters als ein SVGAnimatedLength. Sie spiegelt den berechneten Wert des x Attributs auf dem <pattern> Element wider.
Der Attributwert kann ein \<length>, \<percentage> oder \<number> sein. Der numerische Wert des SVGAnimatedLength.baseVal ist die x-Koordinate des Startpunkts des Musters im Benutzerkoordinatensystem.
Wert
Ein SVGAnimatedLength.
Beispiel
Gegeben folgendes SVG:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- First pattern -->
<pattern
id="pattern1"
x="50"
width="20"
height="20"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<!-- Second pattern -->
<pattern
id="pattern2"
x="100"
width="20"
height="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:
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].x.baseVal.value); // output: 50
console.log(patterns[1].x.baseVal.value); // output: 100
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__x |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.