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