fill

Ví dụ

Tô màu cơ bản, tô bằng gradient và hoạt ảnh

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Basic color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

Ví dụ context-fill

Trong ví dụ này, chúng ta định nghĩa ba hình dạng bằng các phần tử <path>, mỗi hình có giá trị stroke và fill khác nhau. Chúng ta cũng định nghĩa một phần tử <circle> làm marker thông qua phần tử <marker>. Mỗi hình dạng đều có marker được áp dụng thông qua thuộc tính CSS marker.

Phần tử <circle> có stroke="context-stroke" và fill="context-fill" được đặt trên nó. Vì nó được đặt làm marker trong ngữ cảnh của các hình dạng, các thuộc tính này khiến nó kế thừa fill và stroke đã đặt trên phần tử <path> trong từng trường hợp.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url("#circle");
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

Kết quả như sau:

animate

Với <animate>, fill định nghĩa trạng thái cuối cùng của hoạt ảnh.

animateMotion

Với <animateMotion>, fill định nghĩa trạng thái cuối cùng của hoạt ảnh.

animateTransform

Với <animateTransform>, fill định nghĩa trạng thái cuối cùng của hoạt ảnh.

circle

Với <circle>, fill là một thuộc tính trình bày định nghĩa màu của hình tròn.

ellipse

Với <ellipse>, fill là một thuộc tính trình bày định nghĩa màu của hình ellipse.

path

Với <path>, fill là một thuộc tính trình bày định nghĩa màu của phần bên trong hình dạng. (Phần bên trong được định nghĩa bởi thuộc tính fill-rule hoặc thuộc tính CSS fill-rule.)

polygon

Với <polygon>, fill là một thuộc tính trình bày định nghĩa màu của phần bên trong hình dạng. (Phần bên trong được định nghĩa bởi thuộc tính fill-rule hoặc thuộc tính CSS fill-rule.)

polyline

Với <polyline>, fill là một thuộc tính trình bày định nghĩa màu của phần bên trong hình dạng. (Phần bên trong được định nghĩa bởi thuộc tính fill-rule hoặc thuộc tính CSS fill-rule.)

rect

Với <rect>, fill là một thuộc tính trình bày định nghĩa màu của hình chữ nhật.

set

Với <set>, fill định nghĩa trạng thái cuối cùng của hoạt ảnh.

text

Với <text>, fill là một thuộc tính trình bày định nghĩa màu của văn bản.

textPath

Với <textPath>, fill là một thuộc tính trình bày định nghĩa màu của văn bản.

tspan

Với <tspan>, fill là một thuộc tính trình bày định nghĩa màu của văn bản.

Đặc tả

Tương thích trình duyệt

svg.elements.animate.fill

svg.elements.animateMotion.fill

svg.elements.animateTransform.fill

svg.elements.circle.fill

svg.elements.ellipse.fill

svg.elements.path.fill

svg.elements.polygon.fill

svg.elements.polyline.fill

svg.elements.rect.fill

svg.elements.set.fill

svg.elements.text.fill

svg.elements.textPath.fill

svg.elements.tspan.fill

Xem thêm

• Thuộc tính CSS fill