SVGRect

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
SVGRectChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android ?
heightChrome Full support 1Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android Full support 1Chrome Android Full support 18Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome Full support 1Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android Full support 1Chrome Android Full support 18Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xChrome Full support 1Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android Full support 1Chrome Android Full support 18Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
yChrome Full support 1Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android Full support 1Chrome Android Full support 18Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown