SVGCircleElement
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.
Giao diện SVGCircleElement là giao diện cho phần tử <circle>.
Thuộc tính phiên bản
Giao diện này cũng kế thừa các thuộc tính từ giao diện cha SVGGeometryElement.
SVGCircleElement.cxRead only-
Thuộc tính này xác định tọa độ x của tâm của phần tử
<circle>. Nó được biểu thị bởi thuộc tínhcxcủa phần tử. SVGCircleElement.cyRead only-
Thuộc tính này xác định tọa độ y của tâm của phần tử
<circle>. Nó được biểu thị bởi thuộc tínhcycủa phần tử. SVGCircleElement.rRead only-
Thuộc tính này xác định bán kính của phần tử
<circle>. Nó được biểu thị bởi thuộc tínhrcủa phần tử.
Phương thức phiên bản
Kế thừa các phương thức từ giao diện cha SVGGeometryElement.
Ví dụ
Thay đổi kích thước hình tròn
Trong ví dụ này chúng ta vẽ một hình tròn và ngẫu nhiên tăng hoặc giảm bán kính của nó khi bạn nhấp vào nó.
HTML
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 250 250"
width="250"
height="250">
<circle cx="100" cy="100" r="50" fill="gold" id="circle" />
</svg>
JavaScript
const circle = document.getElementById("circle");
function clickCircle() {
// Randomly determine if the circle radius will increase or decrease
const change = Math.random() > 0.5 ? 10 : -10;
// Clamp the circle radius to a minimum of 10 and a maximum of 250,
// so it won't disappear or get bigger than the viewport
const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
circle.setAttribute("r", newValue);
}
circle.addEventListener("click", clickCircle);
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |
Tương thích trình duyệt
Xem thêm
- Phần tử SVG
<circle>