transform-origin
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính SVG transform-origin đặt gốc cho các phép biến đổi của một phần tử.
Bạn có thể dùng thuộc tính này với bất kỳ phần tử SVG nào.
Note:
Là một thuộc tính trình bày, transform-origin cũng có một thuộc tính CSS tương ứng: transform-origin. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Ghi chú sử dụng
| Giá trị | Xem transform-origin |
| Giá trị mặc định | 0 0 |
| Có thể hoạt ảnh | Có |
Note:
Giá trị mặc định của transform-origin là 0 0 cho tất cả phần tử SVG ngoại trừ các phần tử <svg> gốc và các phần tử <svg> là phần tử con trực tiếp của foreignObject. Những phần tử này có transform-origin: 50% 50%, như trong CSS thông thường.
Các độ dài, phần trăm và từ khóa (left, center, right, top và bottom) đều tương đối với reference box. Vì giá trị mặc định của transform-box là view-box, các tọa độ gốc biến đổi sẽ tương đối với viewBox của phần tử SVG, trừ khi chính phần tử đó có một CSS layout box liên kết.
Ví dụ
Các ví dụ sau minh họa việc xoay một hộp chữ nhật 30° quanh một số transform-origin khác nhau.
SVG trong mỗi trường hợp được khai báo với hộp gốc vẽ bằng viền đỏ nét đứt, tiếp theo là hộp đã xoay vẽ bằng màu xanh lá sáng, rồi transform-origin được vẽ như một dấu thập đỏ.
transform-origin mặc định
Theo mặc định, transform-origin có giá trị 0 0, đặt nó tại gốc của viewBox. Bên dưới, chúng ta mở rộng viewBox sang các giá trị âm, để bạn có thể thấy toàn bộ dấu thập, và cũng lưu ý rằng nó không phải lúc nào cũng là góc trên bên trái của phần tử <svg>.
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)" />
<g transform="translate(0 0)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
transform-origin ở tâm
Bên dưới, chúng ta đặt transform-origin thành center, điều này đặt gốc tại tâm của viewBox, nhưng không phải tâm của phần tử đang được biến đổi.
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)"
transform-origin="center" />
<g transform="translate(150 150)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
transform-origin tương đối với phần tử được biến đổi
Để làm cho transform-origin tương đối với phần tử được biến đổi, bạn có thể dùng thuộc tính transform-box. Bên dưới, chúng ta đặt transform-box thành fill-box, điều này làm cho transform-origin tương đối với hộp bao quanh của phần tử đang được biến đổi.
<svg
viewBox="-10 -10 300 300"
xmlns="http://www.w3.org/2000/svg"
width="310"
height="310">
<rect
x="60"
y="10"
width="180"
height="180"
fill="none"
stroke="red"
stroke-width="3"
stroke-dasharray="3 3" />
<rect
class="transformed-elem"
x="60"
y="10"
width="180"
height="180"
fill="lime"
opacity="0.5"
transform="rotate(30)"
transform-origin="center" />
<g transform="translate(150 100)">
<circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
<path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
<circle cx="0" cy="0" r="6" fill="none" stroke="red" />
</g>
</svg>
.transformed-elem {
transform-box: fill-box;
}
Xem CSS transform-origin để biết thêm ví dụ.
Đặc tả
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-origin-property |
| Scalable Vector Graphics (SVG) 2 # PresentationAttributes |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
transform-origin