cx
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 cx xác định tọa độ trục x của một điểm tâm.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Note:
Với vai trò là một geometry property, cx cũng có thể được dùng làm thuộc tính CSS cho <circle> và <ellipse>.
Ví dụ
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<radialGradient cx="25%" id="myGradient">
<stop offset="0" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<circle cx="50" cy="50" r="45" />
<ellipse cx="150" cy="50" rx="45" ry="25" />
<rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
circle
Đối với <circle>, cx xác định tọa độ trục x của tâm hình dạng.
| Giá trị | <length-percentage> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể animate | Có |
Note:
Tọa độ trục x của tâm <circle> cũng có thể được xác định bằng thuộc tính geometry property cx. Nếu được đặt trong CSS, giá trị thuộc tính cx trong CSS sẽ ghi đè giá trị thuộc tính cx.
ellipse
Đối với <ellipse>, cx xác định tọa độ trục x của tâm hình dạng.
| Giá trị | <length-percentage> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể animate | Có |
Note:
Tọa độ trục x của tâm <ellipse> cũng có thể được xác định bằng thuộc tính geometry property cx. Nếu được đặt trong CSS, giá trị thuộc tính cx trong CSS sẽ ghi đè giá trị thuộc tính cx.
radialGradient
Đối với <radialGradient>, cx xác định tọa độ trục x của đường tròn cuối cùng cho radial gradient.
| Giá trị | <length> |
|---|---|
| Giá trị mặc định | 50% |
| Có thể animate | Có |
Ví dụ
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="0" id="myGradient000">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="50%" id="myGradient050">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="100%" id="myGradient100">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
</defs>
<rect
x="1"
y="1"
width="8"
height="8"
fill="url(#myGradient000)"
stroke="black" />
<rect
x="13"
y="1"
width="8"
height="8"
fill="url(#myGradient050)"
stroke="black" />
<rect
x="25"
y="1"
width="8"
height="8"
fill="url(#myGradient100)"
stroke="black" />
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |