SVGPatternElement: height 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 height của giao diện SVGPatternElement mô tả chiều cao của mẫu dưới dạng SVGAnimatedLength. Nó phản ánh giá trị được tính toán của thuộc tính height trên phần tử <pattern>.
Giá trị thuộc tính có thể là một <length>, <percentage> hoặc <number>. Giá trị số của SVGAnimatedLength.baseVal đại diện cho chiều cao của mẫu trong hệ tọa độ người dùng.
Giá trị
Một SVGAnimatedLength.
Ví dụ
Với SVG sau đây:
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>
Chúng ta có thể truy cập các giá trị được tính toán của thuộc tính x:
js
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].height.baseVal.value); // output: 20
console.log(patterns[1].height.baseVal.value); // output: 40
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__height |