diff options
Diffstat (limited to 'files/de/web/svg/namespaces_crash_course/index.html')
| -rw-r--r-- | files/de/web/svg/namespaces_crash_course/index.html | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/files/de/web/svg/namespaces_crash_course/index.html b/files/de/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..baf963151a --- /dev/null +++ b/files/de/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,197 @@ +--- +title: Namespace Kurzanleitung +slug: Web/SVG/Namespaces_Crash_Course +tags: + - Namensraum + - Vektorgrafik +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<p>Als <a href="/en-US/docs/Glossary/XML" title="en-US/docs/Glossary/XML">XML</a> Dialekt verfügt <a href="/en-US/docs/Web/SVG" title="en-US/docs/Web/SVG">SVG</a> über einen eigenen <em>Namespace</em>. Es ist wichtig, Konzept und Anwendung von <em>Namespaces</em> zu verstehen, will man SVG Inhalte selber erstellen. Der Veröffentlichung von Firefox 1.5 vorausgehende Versionen von SVG zollten diesen kaum Beachtung. <em>Namespaces</em> sind jedoch wichtig für Multi-XML Dialekt unterstützende <em>User Agents</em> wie z.B. <a href="/en-US/docs/Mozilla/Gecko" title="en-US/docs/Mozilla/Gecko">Gecko</a>-basierte Browser, die sehr streng damit verfahren.<br> + Nehmen Sie sich die Zeit, <em>Namespaces</em> zu verstehen. Es wird Ihnen allerhand Kopfschmerzen in der Zukunft ersparen.</p> + +<h3 id="Hintergrund">Hintergrund</h3> + +<p>Es ist lange schon ein Ziel des W3C, die gleichzeitige Verwendung verschiedener Typen XML-basierter Inhalte im selben XML-Dokument zu ermöglichen.<br> + So können z.B. SVG and <a href="/en-US/docs/Web/MathML" title="en-US/docs/Web/MathML">MathML</a> direkt in ein XHTML-basiertes wissenschaftliches Dokument eingefügt werden. Die Möglichkeit, verschiedenartige Inhalte zu mischen, bietet viele Vorteile, setzte aber die Lösung sehr konkreter Probleme voraus.</p> + +<p>Selbstverständlich beschreibt jeder XML Dialekt die Bedeutung seiner <em>Markup Tag</em> Bezeichnungen in einer eigenen Spezifikation. Das Problem beim Mischen von Inhalten aus verschiedenen XML-Dialekten im selben XML-Dokument ist, dass <em>Tags</em> aus dem einen Dialekt auch im anderen definiert sein können. So gibt es z.B. sowohl in XHTML wie auch in SVG das <code><title></code> <em>Tag</em>. Wie soll der <em>User Agent</em> die beiden unterscheiden?<br> + Woran erkennt der User Agent überhaupt die Bedeutung von XML Inhalten oder ob es sich um für ihn bedeutungslose Tags aus einer beliebigen XML-Datei handelt?</p> + +<p>Man könnte fälschlicherweise annehmen, dass er dies anhand der <code>DOCTYPE</code> Deklaration erkennt. <em>DTD</em>s wurden jedoch nicht mit Blick auf gemischte Inhalte entworfen und Versuche, <em>DTD</em>s für gemischte Inhalte zu erstellen, sind letztlich gescheitert.</p> + +<p>XML und einige XML Dialekte (einschließlich SVG) erfordern keine <code>DOCTYPE</code> Deklaration und SVG 1.2 wird nicht einmal eine haben. Der Umstand, daß <code>DOCTYPE</code> Deklarationen meist dem Typ des Seiteninhalts entsprechen, ist rein zufällig. DTDs werden zur Validierung, nicht zur Identifizierung von Inhalten benötigt. <em>User Agents</em>, die schummeln und XML-Inhalte per <code>DOCTYPE</code> Deklaration identifizieren, verursachen Probleme.</p> + +<p>Korrekterweise sollte der XML-Inhalt dem <em>User Agent</em> mitteilen, welchem Dialekt <em>Tag</em> Bezeichnungen angehören, indem den <em>Tags</em> explizite <em>Namespace Declarations</em> zugewiesen werden.</p> + +<h3 id="Declaring_namespaces" name="Declaring_namespaces">Namensraumzuweisung</h3> + +<p>Wie sehen Namensraumzuweisungen (<em>Namespace Declarations</em>) aus und wie werden sie konkret verwendet? Hier ein Beispiel: </p> + +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- weitere tags folgen... --> +</svg> +</pre> + +<p>Die <em>Namespace</em> Deklaration ist durch das Attribut <code>xmlns</code> gegeben. Dieses Attribut besagt, daß das <code><svg></code> Tag und seine Kinder-Tags zu dem XML-Dialekt gehören, der dem Namespace <code><span class="nowiki">'http://www.w3.org/2000/svg'</span></code> entspricht, hier eben SVG.<br> + Die <em>Namespace</em> Deklaration hat nur einmal zu erfolgen und zwar im Ursprungs-Tag (<em>root tag</em>). Diese Deklaration definiert den <em>Namespace</em> als Voreinstellung, sodass der <em>User Agent </em>weiß, daß alle dem <code><svg></code> Tag<em> </em>untergeordneten Tags demselben <em>Namespace</em> angehören. <em>User Agents</em> prüfen den <em>Namespace</em> um herauszufinden, ob sie mit dem enthaltenen <em>Markup</em> umgehen können.</p> + +<p>Der <em>Namespace</em> Name (sprich das <code>xmlns</code> Attribut) ist ein einfacher <em>String</em>, sodass der Umstand, daß der SVG Namespace wie ein URI aussieht, nicht weiter wichtig ist. URIs werden allgemein benutzt, weil sie einzigartig sind und nicht, um irgendetwas zu verlinken. URIs werden tatsächlich so häufig verwendet, dass allgemein der Begriff "Namespace URI" gebräuchlicher ist als "Namespace Name".</p> + +<h4 id="Redeclaring_the_default_namespace" name="Redeclaring_the_default_namespace">Umdeklarierung eines vorgegebenen Namensraums</h4> + +<p>Wenn alle Nachkommen des Ursprungs-Tags automatisch dem dadurch vorgegebenen <em>Namespace</em> angehören, wie streut man dann Inhalte aus einem anderen <em>Namespace</em> ein? Die einfache Antwort lautet, man redefiniert den Vorgabe-<em>Namespace</em>. So zum Beispiel:</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- some XHTML tags here --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- some SVG tags here --> + </svg> + <!-- some XHTML tags here --> + </body> +</html> +</pre> + +<p>In diesem Beispiel deklariert das <code>xmlns</code> Attribut des ursprünglichen <code><html></code> Tags den vorgegebenen Namensraum als XHTML. Somit werden dieses und alle nachkommenden Tags als XHTML intepretiert, mit Ausnahme des <code><svg></code> Tags. Das <code><svg></code> Tag hat sein eigenes <code>xmlns</code> Attribut und deklariert somit den ursprünglichen Namensraum um, was bewirkt, dass dieses Tag mitsamt Nachkommen (sofern diese nicht ihrererseits Namensräume erneut umdeklarieren) vom User Agent als SVG erkannt wird.</p> + +<p>Na also, war doch nicht schwer.</p> + +<h4 id="Declaring_namespace_prefixes" name="Declaring_namespace_prefixes">Namensraumpräfixe deklarieren</h4> + +<p>XML-Dialekte definieren außer eigenen Tags auch eigene Attribute. Ursprünglich gehören Attribute zu keinem Namensraum und sind nur deshalb einzigartig, weil sie einem Element mit einzigartigem, eindeutigem Namen zugeordnet sind. </p> + +<p>Manchmal ist es jedoch nötig, Attribute zu definieren, die in vielen verschiedenen Elementen wiederverwendbar sein müssen und trotzdem dasselbe Attribut verkörpern, egal von welchem Element sie verwendet werden. Ein besonders gutes Beispiel hierfür ist das von der XLink Spezifikation definierte <code>href</code> Attribut. Dieses Attribut wird allgemein auch von anderen XML-Dialekten verwendet zum Verlinken externer Quellen. Aber wie teilt man dem <em>User Agent</em> mit, zu welchem XML-Dialekt das Attribut gehört, z.B. XLink? Betrachten wir dazu folgendes Beispiel:</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="cool-script.js" type="text/ecmascript"/> +</svg> +</pre> + +<p>Hier sehen wir das etwas merkwürdige Attribut <code>xmlns:xlink</code>. Vom <code>xmlns</code> Bestandteil ist abzuleiten, daß hier eine weitere Namensraumdeklaration vorliegt. Allerdings wird hier nicht der Vorgabenamensraum festgelegt, sondern der Namensraum für ein "Namensraum Präfix". In diesem Fall wurde das Präfix <code>xlink</code> (der zweite Teil des Attributs) gewählt, um damit dem User Agent etwas über Attribute aus dem Namensraum XLink mitzuteilen.</p> + +<p>Der Begriff Namensraum<em>präfix</em> deutet bereits an, dass damit Attribut- und Tag-Bezeichnungen in Ihrer Bedeutung eingegrenzt werden (ähnlich wie Vorsilben bzw. Präfixe die Bedeutung von Begriffen in menschlicher Sprache modifizieren). Dies geschieht indem das Namensraumpräfix und ein Doppelpunkt dem Attributnamen vorangestellt werden, wie im obigen Beispiel beim <code><script></code> Tag zu sehen. Das erklärt dem <em>User Agent</em>, daß dieses spezielle Attribut zu dem Namensraum gehört, der mit dem Namenraumpräfix XLink deklariert wurde, und ein Attribut ist, das mit derselben Bedeutung in anderen Tags verwendet werden kann.</p> + +<p>Es ist ein XML Fehler, ein Präfix zu benutzen, das nicht an einen Namenraum gebunden wurde. Die mit dem <code>xmlns:xlink</code> Attribut erzeugte Bindung im obigen Beispiel ist unverzichtbar, wenn das <code>xlink:href</code> Attribut keinen Fehler hervorrufen soll. Dieses XLink Attribut wird regelmäßig in SVG benutzt, u.a. mit <code><a></code>, <code><use></code> und <code><image></code> Tags. Darum ist es eine gute Idee, die XLink Deklaration in allen Dokumenten miteinzubeziehen.</p> + +<p>Es ist nützlich zu wissen, dass Namensraumpräfixe auch als <em>Tag</em>-Namen genutzt werden können. Dies vermittelt dem <em>User Agent </em>die Zugehörigkeit eines bestimmten <em>Tags</em> (in diesem Fall jedoch nicht die seiner Kinder!) zu dem Namensraum des Präfixes. Dieses Wissen erspart einige Verwirrung, falls man Markup wie dem folgenden begegnet: </p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>SVG embedded inline in XHTML</h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> + +<p>Weil hier das Namensraumpräfix verwendet wurde für das <code><svg:svg> </code>Tag und sein Kind <code><svg:circle></code>, war es nicht nötig, den Standardnamensraum erneut zu deklarieren. Allgemein ist es jedoch besser, den Standardnamensraum erneut auszuweisen als eine Menge Tags derart mit Präfixen zu versehen. </p> + +<h3 id="Scripting_in_namespaced_XML" name="Scripting_in_namespaced_XML">Arbeiten mit Namensraum-XML</h3> + +<p>Namensräume haben nicht nur Auswirkungen auf <em>Markup</em>, sondern auch auf <em>Scripte</em>. Wer <em>Scripte</em> für Namensraum-XML wie z.B. SVG verfasst, sollte weiterlesen. </p> + +<p>Die Empfehlung zu <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> wurde geschaffen bevor <a class="external" href="http://www.w3.org/TR/REC-xml-names/">die ursprüngliche Empfehlung zu Namenräumen in XML</a> freigegeben wurde. Deshalb kennt DOM1 keine Namensräume, was Probleme verursacht bei Namensraum-XML wie z.B. SVG. Um diese Probleme zu lösen, führte <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> Namenraum berücksichtigende Entsprechungen zu allen anwendbaren DOM Level 1 Methoden ein. Beim Kodieren von SVG ist es wichtig, diese <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">den Namensraum berücksichtigenden Methoden</a> zu verwenden.<br> + Die folgende Tabelle listet alle DOM1 Methoden auf, die nicht in SVG benutzt werden sollten, außerdem ihre DOM2 Entsprechungen, die stattdessen verwendet werden sollten.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1<br> + (nicht verwenden)</th> + <th>DOM2<br> + (stattdessen diese verwenden!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (also <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td> + </tr> + </tbody> +</table> + +<p>Das erste Argument für alle DOM2 Methoden, die den Namespace berücksichtigen, muss der Namespace Name (auch Namespace URI genannt) des betroffenen Elementes oder Attributes sein. Das ist für SVG <strong>Elemente</strong> <span class="nowiki">'http://www.w3.org/2000/svg'</span>. Beachten Sie jedoch: die Empfehlung <a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> besagt, dass der Namespace Name für Attributes ohne Prefix keinen Wert enthält. Anders ausgedrückt, obwohl die Attribute zum Namespace des Tags gehören, verwenden Sie den Namespace Namen nicht, sonder <strong>setzen den Namespace Namen auf null. </strong> Um also ein SVG <code>rect</code> <em>Element</em> mit <code>document.createElementNS()</code> zu erstellen, gehen Sie folgendermaßen vor:</p> + +<pre><code class="language-javascript">document.createElementNS('http://www.w3.org/2000/svg', 'rect');</code></pre> + +<p>Um nun das <code>x</code> <em>Attribut</em> des SVG <code>rect</code> Elementes auszulesen, verfahren Sie wie folgt:</p> + +<pre class="eval"><code class="language-javascript">rect.getAttributeNS(<strong>null</strong>, 'x');</code></pre> + +<p>Beachten Sie, dass sich dies nicht auf Attribute <em>mit</em> Namespace Prefix anwendet (Attribute, die nicht zum gleichen XML Dialect gehören, wie der Tag). Attribute wie <code>xlink:href</code> erfordern den Namespace Namen, der dem Prefix zugewiesen wurde (z.B. <span class="nowiki">http://www.w3.org/1999/xlink</span> für XLink). Um den Wert des <code>xlink:href</code> Attributs eines <code><a></code> Elements in SVG auszulesen, schreibt man:</p> + +<pre><code class="language-javascript">elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');</code></pre> + +<p>Um Attribute mit einem Namespace zu setzen, wird empfohlen (aber nicht erzwungen), dass man auch ihr Prefix als zweites Argument übergibt, so dass das DOM später wieder einfacher nach to XML zurückkonvertriert werden kann (wenn man es z.B. zurück zum Server senden möchte). Ein beispiel:</p> + +<pre><code class="language-javascript">elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');</code></pre> + +<p>Als letztes Beispiel wird aufgezeigt wie man ein an <code><image></code> Element dynamisch mit Hilfe eines Scripts erzeugt:</p> + +<pre><code class="language-javascript">var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</code></pre> + +<h3 id="Conclusion" name="Conclusion">Conclusion</h3> + +<p>Stellen Sie sicher, dass Sie die von Ihnen in der XML Datei verwendeten Namespaces deklarieren. Erfolgt diese Deklaration nicht, werden User Agents wie Firefox den Inhalt nicht erkennen und nur XML Markup anzeigen oder den Anwender informieren, dass ein XML Fehler aufgetreten ist. Es ist empfehlenswert, für das Erstellen einer neuen SVG Datei eine Vorlage zu verwenden, die alle für gewöhnlich verwendeten Namespace Deklarationen enthält. Hat man eine solche Vorlage nicht, kann man mit dem folgenden Code starten:</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +</svg> +</pre> + +<p>Selbst wenn nicht alle aufgeführten Namespaces in einem Dokument verwendet werden, stören die Namespace Deklarationen nicht. Es kann einen vor Problemen bewahren, wenn man das Dokument zu einem späteren Zeitpunkt ergänzt und dabei Elemente aus einer der Deklarationen verwendet.</p> + +<h3 id="A_full_example" name="A_full_example">Vollständiges Beispiel</h3> + +<p>Als vollständiges Beispiel dient <a href="/en-US/docs/Web/SVG/Namespaces_Crash_Course/Example">SVG: Namespaces Crash Course: Example</a>.</p> |