slope
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 slope xác định các giá trị cho bộ lọc tuyến tính, chẳng hạn như độ sáng.
Thuộc tính slope được hỗ trợ bởi các phần tử con của bộ lọc nguyên thủy <feComponentTransfer>, bao gồm các hàm chuyển đổi feFunc-RGBA. Khi type của một hàm chuyển đổi là linear, slope sẽ xác định độ dốc của hàm tuyến tính.
Bạn có thể dùng thuộc tính này với các phần tử hàm chuyển đổi thành phần SVG sau khi đặt type="linear":
Note:
Ban đầu, thuộc tính slope được dùng trong <font-face> để chỉ góc nét dọc của phông chữ. Trường hợp sử dụng này đã bị loại bỏ.
Ghi chú sử dụng
| Giá trị |
<number>
|
|---|---|
| Giá trị mặc định | 1 |
| Có thể animate | Có |
<number>-
Giá trị này cho biết độ dốc của các hàm chuyển đổi thành phần tuyến tính.
Ví dụ
Trong ví dụ này, một hộp gradient có hai phần tử văn bản được áp dụng các bộ lọc tuyến tính. Độ dốc của các hàm chuyển đổi bộ lọc ở mỗi bộ lọc là khác nhau.
<svg
width="8cm"
height="4cm"
viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Examples of feComponentTransfer operations</title>
<desc>
Text strings showing the effects of the slope attribute of the
feComponentTransfer filter function linear options.
</desc>
<defs>
<linearGradient
id="MyGradient"
gradientUnits="userSpaceOnUse"
x1="100"
y1="0"
x2="600"
y2="0">
<stop offset="0" stop-color="red" />
<stop offset="1" stop-color="blue" />
</linearGradient>
<filter
id="Linear1"
filterUnits="objectBoundingBox"
x="0%"
y="0%"
width="100%"
height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="1" />
<feFuncG type="linear" slope="1" />
<feFuncB type="linear" slope="1" />
</feComponentTransfer>
</filter>
<filter
id="Linear2"
filterUnits="objectBoundingBox"
x="0%"
y="0%"
width="100%"
height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="0.5" />
<feFuncG type="linear" slope="2.5" />
<feFuncB type="linear" slope="5" />
</feComponentTransfer>
</filter>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
<g
font-family="Verdana"
font-size="100"
font-weight="bold"
fill="url(#MyGradient)">
<text x="100" y="190" filter="url(#Linear1)">Slope1</text>
<text x="100" y="290" filter="url(#Linear2)">Slope2</text>
</g>
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-slope |