Dải màu辐射性 SVG

Dải màu SVG phải được định nghĩa trong thẻ <defs>.

Dải màu phát xạ

Thẻ <radialGradient> được sử dụng để định nghĩa dải màu phát xạ.

Thẻ <radialGradient> phải được chứa trong thẻ <defs>。<defs> là viết tắt của definitions, nó cho phép định nghĩa các phần tử đặc biệt như dải màu.

Vui lòng sao chép mã dưới đây vào Notepad và lưu tệp dưới tên "radial1.svg". Đặt tệp này vào thư mục web của bạn:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Giải thích mã:

Thuộc tính id của thẻ <radialGradient> có thể đặt tên duy nhất cho dải màu, thuộc tính fill:url(#grey_blue) liên kết phần tử ellipse với dải màu này, thuộc tính cx, cy và r xác định mép ngoài, trong khi fx và fy xác định mép trong Màu sắc của dải màu có thể được tạo bởi hai hoặc nhiều màu. Mỗi màu được quy định bởi một thẻ <stop>. Thuộc tính offset được sử dụng để xác định vị trí bắt đầu và kết thúc của dải màu.

Xem ví dụ

Một ví dụ khác:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Xem ví dụ