intercept
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính intercept xác định intercept của hàm tuyến tính của các chuyển đổi thành phần màu khi thuộc tính type được đặt thành linear.
Hàm linear được định nghĩa là slope * color + intercept, trong đó color là giá trị màu, intercept cung cấp một giá trị cơ sở cho kết quả, và slope là một hệ số tỉ lệ.
Thuộc tính intercept được hỗ trợ bởi các phần tử con của filter primitive <feComponentTransfer> và được dùng với các phần tử hàm chuyển đổi thành phần SVG sau khi type="linear" được đặt:
Ghi chú sử dụng
| Giá trị | <number> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể hoạt ảnh | Có |
<number>-
Giá trị này cho biết intercept của các hàm chuyển đổi thành phần tuyến tính.
Ví dụ
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient
id="gradient"
gradientUnits="userSpaceOnUse"
x1="0"
y1="0"
x2="200"
y2="0">
<stop offset="0" stop-color="red" />
<stop offset="0.5" stop-color="lime" />
<stop offset="1" stop-color="blue" />
</linearGradient>
</defs>
<filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" intercept="0" />
<feFuncG type="linear" intercept="0" />
<feFuncB type="linear" intercept="0" />
</feComponentTransfer>
</filter>
<filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" intercept="0.3" />
<feFuncG type="linear" intercept="0.1" />
<feFuncB type="linear" intercept="0.8" />
</feComponentTransfer>
</filter>
<rect
x="0"
y="0"
width="200"
height="200"
fill="url(#gradient)"
filter="url(#componentTransfer1)" />
<rect
x="220"
y="0"
width="200"
height="200"
fill="url(#gradient)"
filter="url(#componentTransfer2)" />
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-intercept |