SVGPatternElement: width 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 width của giao diện SVGPatternElement mô tả chiều rộng 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 width 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 rộng 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="40"
patternUnits="userSpaceOnUse">
<circle cx="20" cy="20" 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].width.baseVal.value); // output: 20
console.log(patterns[1].width.baseVal.value); // output: 40
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__width |