patternTransform
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính patternTransform xác định một danh sách định nghĩa biến đổi được áp dụng cho một tile pattern.
Bạn có thể dùng thuộc tính này với phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Apply a transform on the tile -->
<pattern
id="p1"
width=".25"
height=".25"
patternTransform="rotate(20)
skewX(30)
scale(1 0.5)">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- Apply the transformed pattern tile -->
<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>
Các phần tử
Bạn có thể dùng thuộc tính này với các phần tử SVG được mô tả trong các phần bên dưới.
<pattern>
Đối với <pattern>, patternTransform xác định một danh sách định nghĩa biến đổi được áp dụng cho một tile pattern.
Note:
Kể từ SVG2, cũng được phép dùng thuộc tính CSS transform. Tuy nhiên, trạng thái triển khai hiện tại không thực sự tốt. Vì lý do tương thích ngược, nên tiếp tục dùng thuộc tính patternTransform.
| Giá trị | <transform-list> |
|---|---|
| Giá trị mặc định | Phép biến đổi đồng nhất |
| Có thể animate | Có |
Các hàm biến đổi
Để biết thêm về định nghĩa của các hàm biến đổi, xem định nghĩa thuộc tính transform.
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute |