Độ dốc xuyên tâm SVG
Độ dốc xuyên tâm SVG - <radialGradient>
Phần tử <radialGradient> được sử dụng để xác định độ dốc xuyên tâm (chuyển đổi vòng tròn từ màu này sang màu khác, từ hướng này sang hướng khác).
Các định nghĩa độ dốc được đặt trong phần tử <defs> hoặc <svg> . Phần tử <defs> là viết tắt của "định nghĩa" và chứa định nghĩa của các phần tử đặc biệt (chẳng hạn như độ dốc).
Mỗi gradient phải có thuộc tính id xác định gradient. Đồ họa/hình ảnh sau đó trỏ đến độ dốc để sử dụng.
Độ dốc xuyên tâm 1
Một hình elip có độ dốc xuyên tâm chuyển từ màu đỏ sang màu xanh:
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop
offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"
/>
</svg> Hãy tự mình thử »Giải thích mã:
- Thuộc tính
idcủa phần tử<radialGradient>xác định tên duy nhất cho gradient - Thuộc tính
cxvàcyxác định x và vị trí của đường tròn cuối của gradient hướng tâm - Thuộc tính
fxvàfyxác định x và vị trí của vòng tròn bắt đầu của gradient xuyên tâm - Thuộc tính
rxác định bán kính của đường tròn cuối của gradient xuyên tâm - Màu sắc của một gradient được xác định bằng hai hoặc nhiều phần tử
<stop> - Thuộc tính
offsettrong<stop>xác định vị trí đặt điểm dừng gradient - Thuộc tính
stop-colortrong<stop>xác định màu của điểm dừng chuyển màu - Thuộc tính
fillcủa phần tử<ellipse>trỏ phần tử tới gradient "grad1"
Độ dốc xuyên tâm 2
Một hình elip có độ dốc xuyên tâm chuyển từ màu đỏ sang xanh lục sang xanh lam:
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop
offset="50%" stop-color="green" />
<stop
offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)"
/>
</svg> Hãy tự mình thử »Độ dốc xuyên tâm 3
Một hình elip có độ dốc xuyên tâm chuyển từ màu đỏ sang màu xanh lam (ở đây chúng tôi đã đặt vị trí x và y của vòng tròn cuối thành 25%):
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad3" cx="25%" cy="25%">
<stop offset="0%" stop-color="red" />
<stop
offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)"
/>
</svg> Hãy tự mình thử »Radial gradient 4 - spreadMethod="reflect"
Một hình elip có độ dốc xuyên tâm chuyển từ màu đỏ sang màu xanh lam với spreadMethod="reflect" :
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad4" cx="25%" cy="25%"
spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop
offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)"
/>
</svg> Hãy tự mình thử »Radial gradient 5 - spreadMethod="repeat"
Một hình elip có độ dốc xuyên tâm chuyển từ màu đỏ sang màu xanh lam với spreadMethod="repeat" :
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop
offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)"
/>
</svg> Hãy tự mình thử »Độ dốc xuyên tâm 6
Xác định một hình elip khác có độ dốc xuyên tâm từ đỏ sang xanh:
Đây là mã SVG:
Ví dụ
<svg height="150" width="400" xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" stop-opacity="0" />
<stop offset="100%" stop-color="blue" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85"
ry="55" fill="url(#grad6)" />
</svg> Hãy tự mình thử »Giải thích mã:
- Thuộc tính
stop-opacitytrong<stop>xác định độ mờ của màu của điểm dừng gradient
Thuộc tính SVG <radialGradient>
| Attribute | Description |
|---|---|
| id | Required. Defines a unique id for the <radialGradient> element |
| cx | The x position of the end circle of the radial gradient. Default is 50% |
| cy | The y position of the end circle of the radial gradient. Default is 50% |
| fr | The radius of the start circle of the radial gradient. Default is 0% |
| fx | The x position of the start circle of the radial gradient. Default is 50% |
| fy | The y position of the start circle of the radial gradient. Default is 50% |
| r | The radius of the end circle of the radial gradient. Default is 50% |
| spreadMethod | Defines the spread method of the gradient. Possible values: "pad", "reflect", "repeat". Default is "pad" |
| href | Defines a reference to another <radialGradient> element that will be used as a template |
| gradientUnits | Defines the coordinate system for cx, cy, r, fx, fy, fr. Possible values: "userSpaceOnUse" and "objectBoundingBox". Default is "objectBoundingBox" |
| gradientTransform | Defines additional transformation to the gradient coordinate system |
