SVGPatternElement: patternUnits property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc patternUnits của giao diện SVGPatternElement phản ánh thuộc tính patternUnits của phần tử <pattern> đã cho. Nó chỉ định hệ tọa độ cho nội dung mẫu và nhận một trong các hằng số được định nghĩa trong SVGUnitTypes.
Giá trị
Một đối tượng SVGAnimatedEnumeration.
Ví dụ
Với SVG sau đây:
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>
Chúng ta có thể truy cập thuộc tính patternUnits:
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)
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternUnits |