---
title: SVGRect
slug: Web/API/SVGRect
translation_of: Web/API/SVGRect
---
<div>{{APIRef("SVG")}}</div>

<p id="sect1"><strong><code>SVGRect</code></strong>는 직사각형을 의미합니다. 직사각형은 최소 x값과 최소 y값, 그리고 양수로 제한되는 폭과 높이를 식별하는 x와 y 좌표 쌍으로 구성됩니다.</p>

<p><strong><code>SVGRect</code></strong> 오브젝트는 읽기 전용으로 지정될 수 있습니다. 이 말은 오브젝트를 수정하려는 시도가 있을 때 exception을 발생시킵니다.</p>

<p>{{InheritanceDiagram(600, 140)}}</p>

<h2 id="프로퍼티">프로퍼티</h2>

<p><em>이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. {{domxref("SVGGeometryElement")}}.</em></p>

<dl>
 <dt>{{domxref("SVGRect.x")}} {{ReadOnlyInline}}</dt>
 <dd>이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.</dd>
 <dt>{{domxref("SVGRect.y")}} {{ReadOnlyInline}}</dt>
 <dd>이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.</dd>
 <dt>{{domxref("SVGRect.width")}} {{ReadOnlyInline}}</dt>
 <dd>이것은 사각형의 너비를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다. </dd>
 <dt>{{SVGAttr("SVGRect.height")}} {{ReadOnlyInline}}</dt>
 <dd>이것은 사각형의 높이를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다. </dd>
</dl>

<p><strong>Exceptions on setting:</strong> A {{domxref("DOMException")}} with the code <code>NO_MODIFICATION_ALLOWED_ERR</code> 는 읽기 전용 속성을 바꾸려 할 때 발생합니다.</p>

<h2 id="메소드">메소드</h2>

<p><em>이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. {{domxref("SVGGeometryElement")}}.</em></p>

<h2 id="예">예</h2>

<p>rect 인터페이스의 간단한 사용법입니다. (매 클릭마다 rect 인터페이스의 색을 변경합니다.)</p>

<h3 id="SVG_content">SVG content</h3>

<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;rect width="300" height="100" id="myrect" onclick="doRectClick()"
      style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /&gt;
  &lt;text x="60" y="40" fill="white" font-size="40"
      onclick="doRectClick();"&gt;Click Me&lt;/text&gt;
&lt;/svg&gt;
</pre>

<h3 id="JavaScript_content">JavaScript content</h3>

<pre class="brush: js">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 + ')';
}
</pre>

<p><em>Click the rect.</em></p>

<p>{{EmbedLiveSample('Example', '', '', '', 'Web/API/SVGRect')}}</p>

<h2 id="상세">상세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Changed the inheritance from {{domxref("SVGElement")}} to {{domxref("SVGGeometryElement")}} and removed the implemented interfaces {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, and {{domxref("SVGTransformable")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("api.SVGRect")}}</p>