Thuộc tính điền SVG
Thuộc tính điền SVG
Thuộc tính fill
đặt màu bên trong phần tử.
Ở đây chúng ta sẽ xem xét ba thuộc tính fill
:
-
fill
- đặt màu bên trong của một phần tử -
fill-opacity
- đặt độ mờ của màu bên trong một phần tử -
fill-rule
- đặt thuật toán được sử dụng để xác định phần bên trong của hình
Thuộc tính điền SVG
Thuộc tính fill
xác định màu sắc bên trong của một phần tử.
Thuộc tính fill
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính fill
có thể là tên màu, giá trị rgb hoặc giá trị hex.
Ở đây chúng tôi sử dụng thuộc tính fill
cho đa giác, hình chữ nhật, hình tròn và văn bản:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" />
<rect
width="150" height="100" x="120" y="50" fill="blue" />
<circle
r="45" cx="350" cy="100" fill="red" />
<text x="420" y="100"
fill="red">I love SVG!</text>
</svg>
Hãy tự mình thử » Thuộc tính độ mờ lấp đầy SVG
Thuộc tính fill-opacity
xác định độ mờ của màu tô.
Thuộc tính fill-opacity
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính fill-opacity
đi từ 0 đến 1 (hoặc 0% đến 100%).
Ở đây chúng tôi sử dụng thuộc tính fill-opacity
cho đa giác, hình chữ nhật, hình tròn và văn bản:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
<rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%"
/>
<circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
<text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>
Hãy tự mình thử »Thuộc tính quy tắc điền SVG
Thuộc fill-rule
xác định thuật toán được sử dụng để xác định phần bên trong của hình dạng.
Thuộc tính fill-rule
có thể được sử dụng với các phần tử SVG sau: <path>
, <polygon>
, <polyline>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính fill-rule
có thể là "khác 0" hoặc "chẵn lẻ".
Ở đây chúng tôi sử dụng thuộc tính fill-rule
cho đa giác, với giá trị "evenodd":
Đây là mã SVG:
Ví dụ
<svg height="210" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd"
/>
</svg>
Hãy tự mình thử » Ở đây chúng tôi sử dụng thuộc tính fill-rule
cho đa giác, có giá trị "khác 0":
Đây là mã SVG:
Ví dụ
<svg height="210" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero"
/>
</svg>
Hãy tự mình thử »