color-interpolation

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS color-interpolation được dùng trong SVG để chỉ định không gian màu nào sẽ được sử dụng cho các phần tử SVG <linearGradient> và <radialGradient>.

Cú pháp

css

/* Giá trị từ khóa */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

Giá trị

auto: Chỉ ra rằng tác nhân người dùng có thể chọn không gian sRGB hoặc linearRGB cho phép nội suy màu. Tùy chọn này chỉ ra rằng tác giả không yêu cầu phép nội suy màu phải xảy ra trong một không gian màu cụ thể.
sRGB: Chỉ ra rằng phép nội suy màu phải xảy ra trong không gian màu sRGB. Mặc định là giá trị ban đầu này nếu không có thuộc tính color-interpolation nào được đặt.
linearRGB: Chỉ ra rằng phép nội suy màu phải xảy ra trong không gian RGB được tuyến tính hóa như được mô tả trong đặc tả sRGB.

Định nghĩa hình thức

Giá trị	`auto` \| `sRGB` \| `linearRGB`
Áp dụng cho	`<linearGradient>` và `<radialGradient>`
Giá trị mặc định	`auto`
Có thể hoạt ảnh	rời rạc

Cú pháp hình thức

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

Trong SVG đầu tiên, thuộc tính color-interpolation không được thêm vào phần tử <linearGradient> và phép nội suy màu mặc định là sRGB. Ví dụ thứ hai cho thấy phép nội suy màu sử dụng giá trị linearRGB.

html

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="sRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#sRGB)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    no color-interpolation (CSS property)
  </text>
</svg>

html

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#linearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation: linearRGB; (CSS property)
  </text>
</svg>

css

svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

Đặc tả

Thông số kỹ thuật
Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty

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

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này