SVGRect
는 직사각형을 의미합니다. 직사각형은 최소 x값과 최소 y값, 그리고 양수로 제한되는 폭과 높이를 식별하는 x와 y 좌표 쌍으로 구성됩니다.
SVGRect
오브젝트는 읽기 전용으로 지정될 수 있습니다. 이 말은 오브젝트를 수정하려는 시도가 있을 때 exception을 발생시킵니다.
프로퍼티
이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. SVGGeometryElement
.
SVGRect.x
Read only- 이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.
SVGRect.y
Read only- 이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.
SVGRect.width
Read only- 이것은 사각형의 너비를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다.
SVGRect.height
Read only- 이것은 사각형의 높이를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다.
Exceptions on setting: A DOMException
with the code NO_MODIFICATION_ALLOWED_ERR
는 읽기 전용 속성을 바꾸려 할 때 발생합니다.
메소드
이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. SVGGeometryElement
.
예
rect 인터페이스의 간단한 사용법입니다. (매 클릭마다 rect 인터페이스의 색을 변경합니다.)
SVG content
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" id="myrect" onclick="doRectClick()"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<text x="60" y="40" fill="white" font-size="40"
onclick="doRectClick();">Click Me</text>
</svg>
JavaScript content
function doRectClick(){
var myrect = document.getElementById('myrect');
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
}
Click the rect.
상세
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'SVGRectElement' in that specification. |
Candidate Recommendation | Changed the inheritance from SVGElement to SVGGeometryElement and removed the implemented interfaces SVGTests , SVGLangSpace , SVGExternalResourcesRequired , SVGStylable , and SVGTransformable . |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGRectElement' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.