Mẫu SVG
Mẫu SVG - <mẫu>
Phần tử <pattern>
được sử dụng để tạo một đồ họa được vẽ lại theo các khoảng tọa độ x và y lặp lại để bao phủ một khu vực.
Tất cả các mẫu SVG được xác định trong phần tử <defs>
. Phần tử <defs>
là viết tắt của "định nghĩa" và chứa định nghĩa về các phần tử đặc biệt (chẳng hạn như mẫu).
Phần tử <pattern>
có thuộc tính id
bắt buộc để xác định mẫu. Sau đó, đồ họa/hình ảnh sẽ trỏ đến mẫu sẽ sử dụng.
Sau đó, bên trong phần tử <pattern>
, chúng ta đặt một hoặc nhiều phần tử sẽ được sử dụng làm mẫu điền.
Một ví dụ mẫu đơn giản
Ví dụ sau tạo một hình chữ nhật chứa đầy các vòng tròn nhỏ:
Đây là mã SVG:
Ví dụ
<svg width="400" height="110" xmlns="https://www.w3.org/2000/svg">
<defs>
<pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="red" />
</pattern>
</defs>
<rect width="200" height="100"
x="0" y="0" stroke="black" fill="url(#patt1)"
/>
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
id
của phần tử<pattern>
xác định tên duy nhất cho mẫu - Thuộc tính
x
vày
của phần tử<pattern>
xác định khoảng cách mà mẫu bắt đầu đi vào hình dạng - Thuộc tính
width
vàheight
của phần tử<pattern>
xác định chiều rộng và chiều cao của mẫu - Phần tử
<circle>
bên trong phần tử<pattern>
xác định hình dạng của mẫu tô màu - Thuộc tính
fill="url(#patt1)"
của phần tử<rect>
trỏ đến mẫu "patt1" - Hình chữ nhật sẽ được lấp đầy bằng mẫu
Một mẫu có độ dốc
Ví dụ sau tạo một hình chữ nhật chứa đầy các hình chữ nhật nhỏ màu xanh nhạt và các vòng tròn chuyển màu:
Đây là mã SVG:
Ví dụ
<svg width="200" height="200" xmlns="https://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1">
<stop
offset="0%" stop-color="white" />
<stop
offset="100%" stop-color="red" />
</linearGradient>
<pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
<rect x="0" y="0" width="50" height="50" fill="lightblue" />
<circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
</pattern>
</defs>
<rect width="200"
height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
id
của phần tử<pattern>
xác định tên duy nhất cho mẫu - Thuộc tính
x
vày
của phần tử<pattern>
xác định khoảng cách mà mẫu bắt đầu đi vào hình dạng - Thuộc tính
width
vàheight
của phần tử<pattern>
xác định chiều rộng và chiều cao của mẫu. Chúng tôi muốn mẫu lặp lại 4 lần theo chiều ngang và 4 lần theo chiều dọc, vì vậy chúng tôi đặt chiều cao và chiều rộng thành 0,25 (nghĩa là chiều rộng và chiều cao của mẫu là 25% tổng kích thước hộp) - Phần tử
<rect>
bên trong phần tử<pattern>
xác định một hình dạng của mẫu tô màu (hình chữ nhật 50x50 màu xanh nhạt) - Phần tử
<circle>
bên trong phần tử<pattern>
xác định một hình dạng khác của mẫu tô màu (một vòng tròn chuyển màu từ trắng sang đỏ) - Thuộc tính
fill="url(#grad1)"
của phần tử<circle>
trỏ tới gradient "grad1" - Thuộc tính
fill="url(#patt2)"
của phần tử<rect>
trỏ đến mẫu "patt2" - Hình chữ nhật sẽ được lấp đầy bằng mẫu