1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
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"><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>
</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>
|
