例項屬性
此介面還繼承了其父介面 SVGGeometryElement 的屬性。
SVGRectElement.x只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的x屬性。 SVGRectElement.y只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的y屬性。 SVGRectElement.width只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的width屬性。 SVGRectElement.height只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的height屬性。 SVGRectElement.rx只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的rx屬性。 SVGRectElement.ry只讀-
返回一個
SVGAnimatedLength物件，對應給定<rect>元素的ry屬性。
例項方法
此介面不實現任何特定方法，但繼承了其父介面 SVGGeometryElement 的方法。
示例
更改 SVG 矩形的顏色
此示例在使用者單擊 SVG 矩形時，將其填充顏色設定為隨機值。
HTML
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
css
#myrect {
fill: blue;
stroke-width: 1;
stroke: black;
}
JavaScript
js
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})`;
});
結果
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement |
瀏覽器相容性
載入中…