files/de/web/svg/element/rect/index.html


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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

---
title: <rect>
slug: Web/SVG/Element/rect
translation_of: Web/SVG/Element/rect
---
<div>{{SVGRef}}</div>

<p><span class="seoSummary">Das <strong><code>&lt;rect&gt;</code></strong> Element ist ein SVG Element, aus welchem Rechtecke mittels einer definierten Eckposition, einer Höhe und einer Breite erstellt werden können.</span> Zudem sind Rechtecke mit abgerundeten Ecken möglich.</p>

<h2 id="Nutzungskontext">Nutzungskontext</h2>

<p>{{svginfo}}</p>

<h2 id="Attribute">Attribute</h2>

<h3 id="Globale_Attribute">Globale Attribute</h3>

<ul>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>

<dl>
 <dt>{{SVGAttr("x")}}</dt>
 <dd>Legt die x-Koordinate des rect-Elements fest.</dd>
 <dt>{{SVGAttr("y")}}</dt>
 <dd>Legt die y-Koordinate des rect-Elements fest.</dd>
 <dt>{{SVGAttr("width")}}</dt>
 <dd>Legt die Breite des rect-Elements fest.</dd>
 <dt>{{SVGAttr("height")}}</dt>
 <dd>Legt die Höhe des rect-Elements fest.</dd>
 <dt>{{SVGAttr("rx")}}</dt>
 <dd>Legt den horizontalen Eckradius des rect-Elements fest.</dd>
 <dt>{{SVGAttr("ry")}}</dt>
 <dd>Legt den vertikalen Eckradius des rect-Elements fest.</dd>
</dl>

<h2 id="DOM_Interface">DOM Interface</h2>

<p>Dieses Element implementiert das {{domxref("SVGRectElement")}} Interface.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einfache_Nutzung_des_rect-Elements">Einfache Nutzung des rect-Elements</h3>

<h4 id="SVG">SVG</h4>

<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="100" height="100"/&gt;
&lt;/svg&gt;</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Simple_rect_usage", 120, 120)}}</p>

<h3 id="Rect-Element_mit_abgerundeten_Ecken">Rect-Element mit abgerundeten Ecken</h3>

<h4 id="SVG_2">SVG</h4>

<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="100" height="100" rx="15" ry="15"/&gt;
&lt;/svg&gt;</pre>

<h4 id="Ergebnis_2">Ergebnis</h4>

<p>{{EmbedLiveSample("Rect_with_rounded_corners", 120, 120)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Erste Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kombatibilität">Browser Kombatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop('1.8')}}</td>
   <td>{{CompatIE('9.0')}}</td>
   <td>{{CompatOpera('8.0')}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>{{CompatAndroid('3.0')}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile('1.8')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>Die Tabelle stützt sich auf <a href="/en-US/SVG/Compatibility_sources">diese Quellen</a>.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{SVGElement("path")}}</li>
</ul>