SVGPatternElement: y 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 y của giao diện SVGPatternElement mô tả tọa độ trục y của điểm bắt đầu 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 y 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 là tọa độ y của điểm bắt đầu 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"
y="50"
width="20"
height="20"
patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<!-- Second pattern -->
<pattern
id="pattern2"
y="100"
width="20"
height="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 y:
js
const patterns = document.querySelectorAll("pattern");
console.log(patterns[0].y.baseVal.value); // output: 50
console.log(patterns[1].y.baseVal.value); // output: 100
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__y |