spreadMethod
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.
Thuộc tính spreadMethod xác định cách một hình dạng được tô ngoài các mép được xác định của gradient.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ghi chú sử dụng
| Giá trị | pad | reflect | repeat |
|---|---|
| Giá trị ban đầu | pad |
| Có thể animate | Có |
Xác định mép của gradient
Theo mặc định, một gradient vươn tới các mép của hình dạng đang được tô. Để thấy tác động của thuộc tính này, bạn cần đặt kích thước gradient nhỏ hơn hình dạng.
Trong trường hợp gradient tuyến tính, các mép có thể được xác định như một hình chữ nhật bằng các thuộc tính x1, x2, y1 và y2. Trong trường hợp gradient xuyên tâm, các mép có thể được xác định bằng các hình tròn ngoài và trong thông qua các thuộc tính cx, cy và r (ngoài) và fx, fy và fr (trong).
Ví dụ về spreadMethod với gradient tuyến tính
SVG
<svg width="220" height="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="PadGradient" x1="33%" x2="67%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</linearGradient>
<linearGradient
id="ReflectGradient"
spreadMethod="reflect"
x1="33%"
x2="67%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</linearGradient>
<linearGradient id="RepeatGradient" spreadMethod="repeat" x1="33%" x2="67%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</linearGradient>
</defs>
<rect fill="url(#PadGradient)" x="10" y="0" width="200" height="40" />
<rect fill="url(#ReflectGradient)" x="10" y="50" width="200" height="40" />
<rect fill="url(#RepeatGradient)" x="10" y="100" width="200" height="40" />
</svg>
Kết quả
Lưu ý rằng một phần ba ở giữa của mỗi gradient là giống nhau. Hai phần ba ngoài cho thấy sự khác biệt giữa ba phương thức trải.
Ví dụ về spreadMethod với gradient xuyên tâm
SVG
<svg width="340" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient
id="RadialPadGradient"
cx="75%"
cy="25%"
r="33%"
fx="64%"
fy="18%"
fr="17%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</radialGradient>
<radialGradient
id="RadialReflectGradient"
spreadMethod="reflect"
cx="75%"
cy="25%"
r="33%"
fx="64%"
fy="18%"
fr="17%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</radialGradient>
<radialGradient
id="RadialRepeatGradient"
spreadMethod="repeat"
cx="75%"
cy="25%"
r="33%"
fx="64%"
fy="18%"
fr="17%">
<stop offset="0%" stop-color="fuchsia" />
<stop offset="100%" stop-color="orange" />
</radialGradient>
</defs>
<rect fill="url(#RadialPadGradient)" x="10" y="10" width="100" height="100" />
<rect
fill="url(#RadialReflectGradient)"
x="120"
y="10"
width="100"
height="100" />
<rect
fill="url(#RadialRepeatGradient)"
x="230"
y="10"
width="100"
height="100" />
</svg>
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementSpreadMethodAttribute |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementSpreadMethodAttribute |