SVGRectElement

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.

SVGRectElement.x Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính x của phần tử <rect> đã cho.

SVGRectElement.y Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính y của phần tử <rect> đã cho.

SVGRectElement.width Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính width của phần tử <rect> đã cho.

SVGRectElement.height Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính height của phần tử <rect> đã cho.

SVGRectElement.rx Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính rx của phần tử <rect> đã cho.

SVGRectElement.ry Read only

Trả về một SVGAnimatedLength tương ứng với thuộc tính ry của phần tử <rect> đã cho.

Phương thức phiên bản

Giao diện này không cài đặt bất kỳ phương thức cụ thể nào, nhưng kế thừa các phương thức từ giao diện cha SVGGeometryElement.

Ví dụ

Thay đổi màu sắc của một hình chữ nhật SVG

Ví dụ này đặt màu nền của một SVGRectElement thành một giá trị ngẫu nhiên mỗi khi người dùng nhấp vào nó.

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" id="myrect" />
  <text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>

CSS

#myrect {
  fill: blue;
  stroke-width: 1;
  stroke: black;
}

JavaScript

const myRect = document.querySelector("#myrect");

myRect.addEventListener("click", () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  myRect.style.fill = `rgb(${r} ${g} ${b})`;
});

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• <rect>