SVGPatternElement: patternUnits-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 patternUnits schreibgeschützte Eigenschaft der SVGPatternElement-Schnittstelle spiegelt das patternUnits-Attribut des gegebenen <pattern>-Elements wider. Sie legt das Koordinatensystem für den Inhalt des Musters fest und nimmt einen der in SVGUnitTypes definierten Konstanten an.
Wert
Ein SVGAnimatedEnumeration-Objekt.
Beispiel
Für folgendes SVG:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern1" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="5" fill="blue" />
</pattern>
<pattern
id="pattern2"
width="10"
height="10"
patternUnits="objectBoundingBox">
<circle cx="5" cy="5" r="5" fill="red" />
</pattern>
</defs>
<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 das patternUnits-Attribut zugreifen:
js
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].patternUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE)
console.log(patterns[1].patternUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX)
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternUnits |
Browser-Kompatibilität
Loading…