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
|
---
title: foreignObject
slug: Web/SVG/Element/foreignObject
translation_of: Web/SVG/Element/foreignObject
---
<div>{{SVGRef}}</div>
<p>Das <code>foreignObject</code>-Element ermöglicht die Einbindung eines fremden XML-Namespace, dessen graphischer Inhalt von einem anderen User-Agent dargestellt wird. Der eingebundene fremde graphische Inhalt ist Subjekt der SVG-Transformationen und des Compositing.</p>
<p>Der Inhalt des <code>foreignObject</code> wird in einem anderen Namespace vermutet. Jedes SVG-Element innerhalb eines <code>foreignObject</code> wird nicht gezeichnet, es sei denn, ein korrekt definiertes SVG-Subdokument mit einer sauberen <code>xmlns</code>-Attribut-Spezifikation ist rekursiv eingebettet. Eine Situation, in der dies geschehen kann, ist, wenn ein SVG-Dokumentenfragment in einem Nicht-SVG-Dokumentenfragment eingebettet ist, welche wiederum in einem SVG-Dokumentenfragment eingebettet ist (z.B. ein SVG-Dokumentenfragment beinhaltet ein XHTML-Dokumentenfragment, welches seinerseits ein anderes SVG-Dokumentenfragment beinhaltet).</p>
<p>Üblicherweise wird ein <code>foreignObject</code> in Verbindung mit dem {{ SVGElement("switch") }}-Element und dem {{ SVGAttr("requiredExtensions") }}-Attribut verwendet, um eine saubere Prüfung der entsprechenden User-Agent-Unterstützung zu ermöglichen und eine alternative Rendermethode zu liefern, wenn der User-Agent nicht unterstütz wird.</p>
<h2 id="Anwendungskontext">Anwendungskontext</h2>
<p>{{svginfo}}</p>
<h2 id="Beispiel">Beispiel</h2>
<pre class="brush: xml"><svg width="400px" height="300px" viewBox="0 0 400 300"
xmlns="http://www.w3.org/2000/svg">
<desc>Dieses Beispiel benutzt das 'switch'-Element, um eine
Ausweichmöglichkeit der graphischen Darstellung zu liefern,
falls XHTML nicht unterstützt werden sollte.</desc>
<!-- Das 'switch'Element wird das erste Kindelement auswählen,
dessen Testergebnisse auf true zurückliefern. -->
<switch>
<!-- Verarbeite das eingebettete XHTML, falls das requiredExtensions-Attribut
true zurückliefert (z.B. wenn der User-Agent XHTML
in SVG eingebettet unterstützt). -->
<foreignObject width="100" height="50"
requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>">
<!-- XHTML-Inhalt steht hier -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Hier ist ein Absatz, welcher einen Zeilenumbruch benötigt.</p>
</body>
</foreignObject>
<!-- Ansonsten verarbeite das folgende alternative SVG.
Beachte, dass das 'text'-Element keine Test-Attribute besitzt.
Wenn keine Test-Attribute angegeben werden, wird das Element so
behandelt, als hätte es keine Test-Attribute und liefert true zurück. -->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Hier ist ein Absatz, welcher</tspan>
<tspan x="10" y="20">einen Zeilenumbruch benötigt.</tspan>
</text>
</switch>
</svg>
</pre>
<h2 id="Attribute">Attribute</h2>
<h3 id="Globale_Attribute">Globale Attribute</h3>
<ul>
<li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">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>
<ul>
<li>{{ SVGAttr("x") }}</li>
<li>{{ SVGAttr("y") }}</li>
<li>{{ SVGAttr("width") }}</li>
<li>{{ SVGAttr("height") }}</li>
</ul>
<h2 id="DOM-Interface">DOM-Interface</h2>
<p>Dieses Element implementiert das <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code>-Interface.</p>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>1.9</td>
<td>{{ CompatNo() }}</td>
<td>2.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>2.0</td>
<td>{{ CompatNo() }}</td>
<td>2.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<p>Diese Tabelle basiert auf <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">diesen Quellen</a>.</p>
|
