diff options
Diffstat (limited to 'files/de/web/svg')
22 files changed, 3031 insertions, 0 deletions
diff --git a/files/de/web/svg/attribute/class/index.html b/files/de/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..919b06605c --- /dev/null +++ b/files/de/web/svg/attribute/class/index.html @@ -0,0 +1,189 @@ +--- +title: class +slug: Web/SVG/Attribute/class +translation_of: Web/SVG/Attribute/class +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Eigenschaft Referenz</a></p> + +<p>Weist einen Klassennamen oder eine Reihe von Klassennamen einem Element zu. Sie können den Klassennamen mehrfach einem Element zuweisen, oder auch zu mehreren Elementen zuweisen. Jedoch müssen Klassennamen mit einem Leerzeichen getrennt sein.</p> + +<p>Der Klassenname eines Elements hat zwei Schlüsselfunktionen:</p> + +<ul> + <li>Als Stil-Selektor, wenn ein Autor einen Satz von Elementen Stil-Informationen zuweist.</li> + <li>Als generelle Funktion für den Browser.</li> +</ul> + +<p>Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.</p> + +<h2 id="Nutzungskontext">Nutzungskontext</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Kategorien</th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Wert</th> + <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts"><liste-von-klassen-namen></a></td> + </tr> + <tr> + <th scope="row">Animierbar</th> + <td>Ja</td> + </tr> + <tr> + <th scope="row">Normatives Dokument</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><html> + <body> + <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + <![CDATA[ + rect.rectClass { + stroke: #000066; + fill: #00cc00; + } + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + ]]> + </style> + + <rect class="rectClass" x="10" y="10" width="100" height="100"/> + <circle class="circleClass" cx="40" cy="50" r="26"/> + </svg> + </body> +</html></pre> + +<h2 id="Elemente">Elemente</h2> + +<p>Die folgenden ELemente können das <code>class</code> Attribut verwenden:</p> + +<div class="threecolumns"> +<ul> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("desc") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("linearGradient") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("path") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("textPath") }}</li> + <li>{{ SVGElement("title") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("use") }}</li> +</ul> +</div> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilitä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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Animation support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("5") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/de/web/svg/attribute/index.html b/files/de/web/svg/attribute/index.html new file mode 100644 index 0000000000..ddda2e93cb --- /dev/null +++ b/files/de/web/svg/attribute/index.html @@ -0,0 +1,467 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> + +<h2 id="SVG_Attributes">SVG Attributes</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("href") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tabindex") }}</li> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_event_attributes">Animation event attributes</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="Animation_attribute_target_attributes">Animation attribute target attributes</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Animation_value_attributes">Animation value attributes</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> + +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Core_attributes">Core attributes</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}</p> + +<h3 id="Document_event_attributes">Document event attributes</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Presentation_attributes">Presentation attributes</h3> + +<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Style_attributes">Style attributes</h3> + +<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</p> + +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_attributes">XLink attributes</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> diff --git a/files/de/web/svg/attribute/preserveaspectratio/index.html b/files/de/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..71db4f5225 --- /dev/null +++ b/files/de/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,110 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>In einigen Fällen, meistens wenn man das {{ SVGAttr("viewBox") }} Attribut benutzt, ist es wünschenswert die Grafik so zu skalieren, dass sie auch mit ungleichem (non-uniform) Seitenverhältnis den gesamten viewport einnimmt. Ein anderer Fall wäre es, mit gleichmäßiger (uniform) Skalierung die Seitenverhältnise der Grafik beizubehalten.<br> + <br> + Das Attribut <code>preserveAspectRatio</code> legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.<br> + <br> + Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem {{ SVGElement("image") }} Element, ist <code>preserveAspectRatio</code> nur wirksam, wenn auch ein Wert für {{ SVGAttr("viewBox") }} im gleichen Element angegeben wurde. Für diese Elemente ist, wenn das Attribut {{ SVGAttr("viewBox") }} nicht angegeben wurde, <code>preserveAspectRatio</code> nicht aktiviert.<br> + <br> + In {{ SVGElement("image") }} Elementen, gibt <code>preserveAspectRatio</code> an, wie die darin verlinkten Bilder sich in den Referenz-Rahmen einpassen und ob die Seitenverhältnisse des verlinkten Bildes, unter Beachtung des momentanen Benutzer-Koordinatensystems, beibehalten werden sollen.</p> + +<h2 id="Verwendungskontext">Verwendungskontext</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Kategorien</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Inhalt</th> + <td><align> [<meetOrSlice>]</td> + </tr> + <tr> + <th scope="row">Animierbar</th> + <td>Ja</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute" title="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><align></dt> + <dd>Der <code><align></code> Parameter bestimmt ob gleichmäßige Skalierung benutzt wird und wenn dies der Fall ist, die Ausrichtungs-Methode die genutzt wird, im Fall, dass das Seitenverhältnis der {{ SVGAttr("viewBox") }} nicht dem Seitenverhältnis des viewports entspricht. Der <code><align></code> Parameter muss einen der folgenden Werte enthalten: + <ul> + <li><strong>none</strong><br> + Keine einheitliche Skalierung erzwingen. Skaliere die Grafiken des gegebenen Elements ungleichmäßig, wenn notwendig, so dass die bounding-box (Begrenzungs-Rahmen) exakt dem viewport-rectangle (Rechteck des Sichtbereichs) entspricht.<br> + (Bemerkung: Wenn <code><align></code> den Wert <code>none</code> enthält, wird der Wert für <code><meetOrSlice></code> ignoriert.)</li> + <li><strong>xMinYMin</strong> - Erzwinge gleichmäßige Skalierung.<br> + Richte <code><min-x></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten X-Wert des viewports aus.<br> + Richte <code><min-y></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li> + <li><strong>xMidYMin</strong> - Erzwinge gleichmäßige Skalierung.<br> + Richte den X-Wert des Mittelpunktes der Element-{{ SVGAttr("viewBox") }} am X-Wert des viewport-Mittelpunktes aus.<br> + Richte den <code><min-y></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li> + <li><strong>xMaxYMin</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the <code><min-y></code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li> + <li><strong>xMinYMid</strong> - Force uniform scaling.<br> + Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br> + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMaxYMid</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMinYMax</strong> - Force uniform scaling.<br> + Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + <li><strong>xMidYMax</strong> - Force uniform scaling.<br> + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + <li><strong>xMaxYMax</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + </ul> + </dd> + <dt><meetOrSlice></dt> + <dd>The <code><meetOrSlice></code> parameter is optional and, if provided, is separated from the <code><align></code> value by one or more spaces and then must be one of the following strings: + <ul> + <li><strong>meet</strong> (the default) - Scale the graphic such that: + <ul> + <li>aspect ratio is preserved</li> + <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li> + <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li> + </ul> + In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li> + <li><strong>slice</strong> - Scale the graphic such that: + <ul> + <li>aspect ratio is preserved</li> + <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li> + <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li> + </ul> + In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li> + </ul> + </dd> +</dl> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>preserveAspectRatio</code> attribute</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> diff --git a/files/de/web/svg/element/animate/index.html b/files/de/web/svg/element/animate/index.html new file mode 100644 index 0000000000..ffb97d1947 --- /dev/null +++ b/files/de/web/svg/element/animate/index.html @@ -0,0 +1,115 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p>Das <code>animate</code> Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.</p> + +<p>Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem <code>href</code> attribut des Zielelements.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attribute">Attribute</h2> + +<h3 id="Globale_Attribute">Globale Attribute</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Spezifische_Attribute">Spezifische Attribute</h3> + +<ul> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> +</ul> + +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/SVGAnimateElement" title="DOM/SVGAElement">SVGAnimateElement</a></code> Schnittstelle.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[6-7]"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" attributeName="x" from="-100" to="120" + dur="10s" repeatCount="indefinite"/> + </rect> +</svg></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</p> + +<h2 id="Bedenken_bezüglich_der_Barrierefreiheit">Bedenken bezüglich der Barrierefreiheit</h2> + +<p>Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.</p> + +<p>Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designen von sicheren Web Animationen für Bewegungsempfindlichkeit - Ein Artikel der Extraklasse</a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Eine Einführung in die Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsives Design für Bewegungen | WebKit</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Verstehen der WCAG, Guideline 2.2 Erklärungen</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Verstehen der Erfolgskriteren 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatiblität">Browser Kompatiblität</h2> + +<div> +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde von strukturierten Daten generiert. Wenn Du etwas zu diesen Daten beitragen willst dann checke <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und sende uns einen Pull Request.</div> + +<p>{{Compat("svg.elements.animate")}}</p> +</div> + +<p> </p> diff --git a/files/de/web/svg/element/circle/index.html b/files/de/web/svg/element/circle/index.html new file mode 100644 index 0000000000..001b06f8cc --- /dev/null +++ b/files/de/web/svg/element/circle/index.html @@ -0,0 +1,114 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - Grafikelement + - Kreis + - Mittelpunkt + - Radius + - SVG + - form +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p>Das Element <code>circle</code> (Kreis) gehört zu den Grundformen in SVG. Kreise werden durch Angabe eines Mittelpunkts und eines Radius erzeugt.</p> + +<h2 id="Verwendungskontext">Verwendungskontext</h2> + +<p>{{svginfo}}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="60" r="50"/> +</svg></pre> + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg" title="https://developer.mozilla.org/files/3252/circle.svg">circle.svg</a></p> + +<h2 id="Attribute">Attribute</h2> + +<h3 id="Globale_Attribute">Globale Attribute</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en/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("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert das {{ domxref("SVGCircleElement") }} Interface.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>1.0</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>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Diese Übersicht basiert auf diesen <a href="/en-US/docs/Web/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">Quellen</a>.</p> + +<h2 id="Verwandte_Begriffe">Verwandte Begriffe</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> +</ul> diff --git a/files/de/web/svg/element/foreignobject/index.html b/files/de/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..f76fd63b34 --- /dev/null +++ b/files/de/web/svg/element/foreignobject/index.html @@ -0,0 +1,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> diff --git a/files/de/web/svg/element/index.html b/files/de/web/svg/element/index.html new file mode 100644 index 0000000000..4e7586d0b0 --- /dev/null +++ b/files/de/web/svg/element/index.html @@ -0,0 +1,209 @@ +--- +title: SVG Elementreferenz +slug: Web/SVG/Element +tags: + - SVG + - SVG Referenz +translation_of: Web/SVG/Element +--- +<h2 id="SVG_Elemente">SVG Elemente</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="Kategorien">Kategorien</h2> + +<h3 id="Animationselemente">Animationselemente</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("set")}}</p> + +<h3 id="Grundformen">Grundformen</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Containerelemente">Containerelemente</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p> + +<h3 id="Beschreibende_Elemente">Beschreibende Elemente</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Filterelemente">Filterelemente</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Farbverlaufselemente">Farbverlaufselemente</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}</p> + +<h3 id="Grafikelemente">Grafikelemente</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Lichtquellenelemente">Lichtquellenelemente</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Formelemente">Formelemente</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Strukturelle_Elemente">Strukturelle Elemente</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Textelemente">Textelemente</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Textkindelemente">Textkindelemente</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Nicht_kategorisierte_Elemente">Nicht kategorisierte Elemente</h3> + +<p>{{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("foreignObject")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("hkern")}}, {{SVGElement("mpath")}}, {{SVGElement("script")}}, {{SVGElement("stop")}}, {{SVGElement("style")}}, {{SVGElement("view")}}, {{SVGElement("vkern")}}</p> diff --git a/files/de/web/svg/element/path/index.html b/files/de/web/svg/element/path/index.html new file mode 100644 index 0000000000..ebc123889a --- /dev/null +++ b/files/de/web/svg/element/path/index.html @@ -0,0 +1,98 @@ +--- +title: <path> +slug: Web/SVG/Element/path +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<p>Das <strong><code><path></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> Element ist das allgemeine Element zum definieren einer Form. Alle Grundformen können mit einem path-Element erzeugt werden.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z"/> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="Attribute">Attribute</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("d")}}</dt> + <dd>Dieses Attribut definiert die Form des Pfades.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>''</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Dieses Attribut lässt den Author die Gesammtlänge des Pfades in der Einheit des Nutzers definieren.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Globale_Attribute">Globale Attribute</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attribute</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Style Attribute</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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("SVG Paths", "#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG Paths")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.path")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> +</ul> diff --git a/files/de/web/svg/element/polygon/index.html b/files/de/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..d620bfa203 --- /dev/null +++ b/files/de/web/svg/element/polygon/index.html @@ -0,0 +1,142 @@ +--- +title: <polygon> +slug: Web/SVG/Element/polygon +tags: + - Element + - Referenz + - SVG + - SVG Grafik +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p>Das <strong><code><polygon></code></strong> Element definiert eine geschlossene Form, die aus mehreren geraden Linien besteht. Der letzte Punkt wird mit dem ersten Punkt verbunden. Für geöffnete (nicht verbundene) Formen existiert das {{SVGElement("polyline")}} Element.</p> + +<h2 id="Verwendung">Verwendung</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">Bedingte Verarbeitungsattribute</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Kernattribute</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Grafische Ereignisattribute</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Darstellungsattribute</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Zielgenaue_Attribute">Zielgenaue Attribute</h3> + +<ul> + <li>{{SVGAttr("points")}}</li> +</ul> + +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert die {{domxref("SVGPolygonElement")}} Schnittstelle.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/> +</svg></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilitä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>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatChrome('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>Grundlegende 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>Diese Tabelle basiert auf <a href="/en-US/docs/Web/SVG/Compatibility_sources">diesen Daten</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{SVGElement("polyline")}}</li> +</ul> diff --git a/files/de/web/svg/element/rect/index.html b/files/de/web/svg/element/rect/index.html new file mode 100644 index 0000000000..1098542db5 --- /dev/null +++ b/files/de/web/svg/element/rect/index.html @@ -0,0 +1,164 @@ +--- +title: <rect> +slug: Web/SVG/Element/rect +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Das <strong><code><rect></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]"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"/> +</svg></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]"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100" rx="15" ry="15"/> +</svg></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', '<rect>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '<rect>')}}</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> diff --git a/files/de/web/svg/element/svg/index.html b/files/de/web/svg/element/svg/index.html new file mode 100644 index 0000000000..7be6f700fe --- /dev/null +++ b/files/de/web/svg/element/svg/index.html @@ -0,0 +1,135 @@ +--- +title: <svg> +slug: Web/SVG/Element/svg +tags: + - Element + - Referenz + - SVG + - SVG Kontainer + - Web +translation_of: Web/SVG/Element/svg +--- +<div>{{SVGRef}}</div> + +<p>Das <code>svg</code> Element ist ein Container, der ein neues Koordinatensystem und ein <a href="/en-US/docs/Web/SVG/Attribute/viewBox">Darstellungsfeld</a> definiert. Es wird als das äußerste Element jedes SVG Dokuments verwendet, aber kann auch dazu dienen SVG Fragmente innerhalb von einem anderen SVG oder einem HTML Dokument einzubetten.</p> + +<div class="note"> +<p><strong>Anmerkung:</strong> Das <code>xmlns</code> Attribute wird nur benötigt wenn das <code>svg</code>-Element das äußerste Element eines <em>SVG Dokuments</em> ist.</p> +</div> + +<div id="Exeemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="40" stroke="red" fill="grey" /> + <circle cx="150" cy="50" r="4" stroke="red" fill="grey" /> + + <svg viewBox="0 0 10 10" x="200" width="100"> + <circle cx="5" cy="5" r="4" stroke="red" fill="grey" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Berücksichtige das folgende SVG Bild (dies stellt die italienische Nationalflagge dar):</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + width="150" height="100" viewBox="0 0 3 2"> + + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> +</svg></pre> + +<p>Es könnt folgendermaßen in ein HTML5 Dokument inkludiert werden:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>HTML/SVG Example</title> +</head> + +<body> + + <svg width="150" height="100" viewBox="0 0 3 2"> + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> + </svg> + +</body> +</html></pre> + +<h2 id="Attribute">Attribute</h2> + +<h3 id="Globale_Attribute">Globale Attribute</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Spezifische_Attribute">Spezifische Attribute</h3> + +<ul> + <li>{{SVGAttr("version")}}</li> + <li>{{SVGAttr("baseProfile")}}</li> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("contentScriptType")}}</li> + <li>{{SVGAttr("contentStyleType")}}</li> + <li>{{SVGAttr("viewBox")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code> Interface.</p> + +<h2 id="Nutzungskontext">Nutzungskontext</h2> + +<p>{{svginfo}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/de/web/svg/element/textpath/index.html b/files/de/web/svg/element/textpath/index.html new file mode 100644 index 0000000000..c7b1218887 --- /dev/null +++ b/files/de/web/svg/element/textpath/index.html @@ -0,0 +1,71 @@ +--- +title: textPath +slug: Web/SVG/Element/textPath +translation_of: Web/SVG/Element/textPath +--- +<div>{{SVGRef}}</div> + +<p>Neben der Fähigkeit, Text auf einer Geraden Linie zu zeichnen, kann SVG diesen auch entlang der Form eines {{ SVGElement("path") }} Elements platzieren. Um von dieser Funktion Gebrauch zu machen, füge den gewünschten Text in einem<code>textPath</code> Element mit einem<code>xlink:href</code> Attribut mit einer Referenz zu dem {{ SVGElement("path") }} Element.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="MyPath" + d="M 100 200 + C 200 100 300 0 400 100 + C 500 200 600 300 700 200 + C 800 100 900 100 900 100" /> + </defs> + + <use xlink:href="#MyPath" fill="none" stroke="red" /> + + <text font-family="Verdana" font-size="42.5"> + <textPath xlink:href="#MyPath"> + We go up, then we go down, then up again + </textPath> + </text> + + <!-- Show outline of the viewport using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke="black" stroke-width="2" /> +</svg> +</pre> + +<p>Live result:</p> + +<p>{{EmbedLiveSample("Example",500,175)}}</p> + +<h2 id="Attributes">Attributes</h2> + +<h3 id="Global_attributes">Global attributes</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Specific_attributes">Specific attributes</h3> + +<ul> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the <code><a href="/en/DOM/SVGTextPathElement" title="en/DOM/SVGTextPathElement">SVGTextPathElement</a></code> interface.</p> diff --git a/files/de/web/svg/element/view/index.html b/files/de/web/svg/element/view/index.html new file mode 100644 index 0000000000..eea389a533 --- /dev/null +++ b/files/de/web/svg/element/view/index.html @@ -0,0 +1,149 @@ +--- +title: <view> +slug: Web/SVG/Element/view +translation_of: Web/SVG/Element/view +--- +<div>{{SVGRef}}</div> + +<p><view> ist ein definierter Weg, das Bild zu betrachten, wie eine Vergrößerungsstufe oder eine Detail-Ansicht.</p> + +<h2 id="Gebrauchs-Kontext">Gebrauchs-Kontext</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#Aria_attributes" title="en/SVG/Attribute#Core">Bereichattribute</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Kernattribute</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Global_event_attributes" title="en/SVG/Attribute#Core">Globale Ereignisattribute</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Spezifische_Attribute">Spezifische Attribute</h3> + +<ul> + <li>{{SVGAttr("viewBox")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("zoomAndPan")}}</li> + <li>{{SVGAttr("viewTarget")}}</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="600" height="200" viewBox="0 0 600 200" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <radialGradient id="gradient"> + <stop offset="0%" stop-color="#8cffa0" /> + <stop offset="100%" stop-color="#8ca0ff" /> + </radialGradient> + </defs> + + <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> + + <view id="halfSizeView" viewBox="0 0 1200 400"/> + <view id="normalSizeView" viewBox="0 0 600 200"/> + <view id="doubleSizeView" viewBox="0 0 300 100"/> + + <a xlink:href="#halfSizeView"> + <text x="5" y="20" font-size="20">half size</text> + </a> + <a xlink:href="#normalSizeView"> + <text x="5" y="40" font-size="20">normal size</text> + </a> + <a xlink:href="#doubleSizeView"> + <text x="5" y="60" font-size="20">double size</text> + </a> +</svg></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Example", 600, 200)}}</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the {{domxref("SVGViewElement")}} interface.</p> + +<h2 id="Specifications">Specifications</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', 'linking.html#ViewElement', '<view>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'linking.html#ViewElement', '<view>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/svg/index.html b/files/de/web/svg/index.html new file mode 100644 index 0000000000..927ad8d406 --- /dev/null +++ b/files/de/web/svg/index.html @@ -0,0 +1,112 @@ +--- +title: SVG +slug: Web/SVG +translation_of: Web/SVG +--- +<div class="callout-box"> + <strong><a href="/de/docs/SVG/Tutorial" title="SVG/Tutorial">Einführung</a></strong><br> + Dieses Tutorial soll den Einstieg in SVG erleichtern.</div> +<div> + <strong>Scalable Vector Graphics (SVG)</strong> ist eine <a href="/de/docs/XML" title="XML">XML</a>-Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken. Im Grunde ist SVG für Grafiken das, was XHTML für Texte ist. + <p>SVG ähnelt etwas der proprietären Flash-Technologie. Aber was SVG von Flash unterscheidet, ist, dass es ein <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C Standard</a> ist und im Gegensatz zu einem geschlossenem Binärformat auf XML basiert. Es wurde geschaffen, um mit anderen Standards des <a class="external" href="http://www.w3.org/">W3C</a> zusammenzuarbeiten, wie zum Beispiel <a href="/de/docs/CSS" title="CSS">CSS</a>, <a href="/de/docs/DOM" title="DOM">DOM</a> und <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentation">Dokumentation</h2> + <dl> + <dt> + <a href="/de/docs/SVG/Element" title="SVG/Element">SVG Elementreferenz</a></dt> + <dd> + Detaillierte Informationen über die von Gecko unterstützen SVG Elemente.</dd> + <dt> + HTML-Inhalte mit SVG aufwerten</dt> + <dd> + SVG arbeitet mit HTML, CSS und JavaScript zusammen und kann verwendet werden, um eine normale HTML-Seite oder eine Webapplikation mit Vektorgrafiken zu bereichern.</dd> + </dl> + <ul> + <li>Tutorial zur Verwendung von <a href="/de/docs/SVG_In_HTML_Introduction" title="SVG_in_HTML_einbinden">SVG in HTML</a></li> + <li>Live Beispiele: Google <a class="external" href="http://maps.google.com"> Maps</a> und <a class="external" href="http://docs.google.com">Docs</a> oder <a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG Bubble Menü</a></li> + </ul> + <dl> + <dt> + SVG in Mozilla</dt> + <dd> + Hinweise und Informationen über die Implementierung von SVG in Mozilla.</dd> + </dl> + <ul> + <li>Derzeit <a href="/de/docs/SVG_im_Firefox" title="SVG_im_Firefox">unterstützte SVG Features</a> im Firefox</li> + <li><a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en)</li> + <li>Eine Übersicht zum <a href="/de/docs/Mozilla_SVG_Projekt" title="Mozilla_SVG_Projekt">Mozilla SVG Projekt</a></li> + <li><a href="/de/docs/SVG/FAQ" title="SVG/FAQ">Häufig gestellte Fragen</a> im Bezug auf SVG und Mozilla</li> + <li>Folien und Demos zu <a class="external" href="http://jwatt.org/svg-open/2009/slides.xhtml" title="http://jwatt.org/svg-open/2009/slides.xhtml">SVG und Mozilla</a> von der SVG Open 2009</li> + </ul> + <dl> + <dt> + <a href="/de/docs/SVG/SVG_Animationen_mit_SMIL" title="SVG/SVG_Animationen_mit_SMIL">SVG Animationen mit SMIL</a></dt> + <dd> + Wie SVG Animationen mittels SMIL realisiert werden können.</dd> + </dl> + <h2 class="Related_Topics" id="Beispiele">Beispiele</h2> + <dl> + <dt> + Das SVG Bildformat</dt> + <dd> + SVG ist ein Bildformat für Vektorgrafiken, welche den großen Vorteil haben, dass sie ohne Verlust der Bildqualität skaliert werden können. Bei Rastergrafiken (Bitmaps) ist dies nicht möglich.</dd> + </dl> + <ul> + <li><a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Löwe</a>, <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Schmetterling</a> & <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li> + <li><a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG Galerie</a></li> + <li>weitere Beispiele: <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples auf croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a></li> + </ul> + <dl> + <dt> + Animationen und Interaktionen</dt> + <dd> + Wie HTML, hat SVG ein <em>Document Model</em> (DOM) sowie Events und kann mittels JavaScript angesprochen werden. Das erlaubt Entwicklern animierte und interaktive Grafiken zu erstellen.</dd> + </dl> + <ul> + <li>Interaktive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">Foto</a> Manipulationen</li> + <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML Transformationen</a> mittels <code>foreignObject</code></li> + </ul> + <dl> + <dt> + Karten, grafische Darstellungen, Spiele und 3D Experimente</dt> + <dd> + Hier sind einige Beispiele aufgelistet, die starken Gebrauch von SVG machen.</dd> + </dl> + <ul> + <li><a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> & <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> + <li><a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a></li> + <li><a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">Bevölkerungskarte der USA</a> und <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">deutsche Bevölkerungspyramide</a></li> + <li><a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D Box</a> & <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D Boxen</a></li> + <li><a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM Tool zum Zeichen</a></li> + </ul> + <p><span class="alllinks"><a href="/de/docs/tag/SVG" title="tag/SVG">Alle anzeigen...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>Mozillas SVG Foren:</li> + </ul> + <p>{{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</p> + <ul> + <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a></li> + <li><a href="/de/docs/tag/SVG:Tools" title="tag/SVG:Tools">weitere...</a></li> + </ul> + <h2 class="Related_Topics" id="Verwandte_Themen">Verwandte Themen</h2> + <ul> + <li><a href="/de/docs/XML" title="XML">XML</a>, <a href="/de/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<div> + {{HTML5ArticleTOC}}</div> 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> diff --git a/files/de/web/svg/tutorial/einführung/index.html b/files/de/web/svg/tutorial/einführung/index.html new file mode 100644 index 0000000000..9e4250ed20 --- /dev/null +++ b/files/de/web/svg/tutorial/einführung/index.html @@ -0,0 +1,21 @@ +--- +title: Einführung +slug: Web/SVG/Tutorial/Einführung +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png"></p> +<p><a class="internal" href="/De/SVG" rel="internal" title="De/SVG">SVG</a> ist eine <a class="internal" href="/de/XML" title="De/XML">XML</a>-Sprache, vergleichbar mit <a class="internal" href="/De/XHTML" rel="internal" title="De/XHTML">XHTML</a>, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.</p> +<p>SVG erschien im Jahre 1999 nachdem mehrere Formate zum <a class=" external" href="http:///w3.org">W3C</a> eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während <a class="internal" href="/De/HTML/Canvas" rel="internal" title="De/HTML/Canvas">HTML:Canvas</a> oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.</p> +<h3 id="Vor_dem_Beginn">Vor dem Beginn</h3> +<p>Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel <a class="external" href="http://www.inkscape.org/">Inkscape</a>, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> oder <a href="/de/CSS" title="de/CSS">CSS</a>).</p> +<p>SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im <a class="external" href="http://wiki.svg.org/Viewer_Implementations">SVG Wiki</a>. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.</p> +<p>Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:</p> +<ul> <li>SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)</li> <li>Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.</li> +</ul> +<p>SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die <a href="/de/SVG/Elementreferenz">Elementreferenz</a> und die <a href="/de/SVG/Schnittstellenreferenz">Schnittstellenreferenz</a> zu verwenden, um alles Weitere zu finden.</p> +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p> diff --git a/files/de/web/svg/tutorial/fills_and_strokes/index.html b/files/de/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..2dd5fb9a7f --- /dev/null +++ b/files/de/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,147 @@ +--- +title: Fills and Strokes +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - Anfänger + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> + +<p>Es gibt mehrere Möglichkeiten die Farben von Formen mit zu verändern, mit Inline CSS (inklusive Attributen am Objekt), eingebettetem CSS oder einer externen CSS Datei. Die meisten <a href="/en-US/docs/Glossary/SVG">SVG</a>s im Netz nutzen Inline CSS, aber jede Möglichkeit hat Vor- und Nachteile.</p> + +<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Füllungs- und Konturattribute</h2> + +<h3 id="Painting" name="Painting">Malen</h3> + +<p>Durch das Setzen zweier Attribute beim Element, kann einfache Farbgebung durchgeführt werden: <code>fill</code> und <code>stroke</code>. Dabei setzt <code>fill </code>die Farbe innerhalb des Objektes, während <code>stroke</code> die Farbe der Linien um das Objekt herum bestimmt. Es können die gleichen Namensschemen für CSS Farben genutzt werden, welche auf bei HTML Elementen verwendet werden - also Farbnamen (z.B. <em>red</em>), RGB Werte (z.B. <em>rgb(255, 0, 0)</em>, HEX Codes, rgba und weitere).</p> + +<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + fill-opacity="0.5" stroke-opacity="0.8"/> +</pre> + +<p>Zusätzlich kann die Durchsichtigkeit von <code>fill</code> und <code>stroke</code> in SVG verändert werden. Diese wird durch die <code>fill-opacity</code> und <code>stroke-opacity</code> Attribute gesetzt.</p> + +<div class="note style-wrap">Bemerkung: In Firefox 3+ sind auch rgba Werte möglich, und erzeugen den gleichen Effekt, allerdings wird empfohlen aus Kompatibilitätsgründen fill/stroke-opacity separat zu setzen. Wenn ein rgba Wert und ein fill/stroke-opacity Wert gesetzt wird, so werden beide angewendet.</div> + +<h3 id="Stroke" name="Stroke">Kontur</h3> + +<p>Zusätzlich zu ihren Farbeigeschaften gibt es noch einige andere Attribute, welche festlegen wie eine Kontur auf einer Linie gezeichnet wird.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> +</svg></pre> + +<p>Die <code>stroke-width</code> Eigenschaft setzt die Breite der Kontur. Konturen werden immer zentriert auf dem Pfad gezeichnet. Im obigen Beispiel ist der Pfad in Pink und die Kontur in Schwarz dargestellt.</p> + +<p>Die zweite Eigenschaft von Konturen ist <code>stroke-linecap</code>, welchen ebenfalls oben gezeigt ist. Diese kontrolliert die Form der Konturenden.</p> + +<p>Es gibt drei mögliche Werte für <code>stroke-linecap</code>:</p> + +<ul> + <li><code>butt</code> schließt die Kontur mit einer Geraden Kante, welche senkrecht zur Richtung der Kontur steht und deren Ende schneidet.</li> + <li><code>square</code> ist sehr ähnlich, geht allerdings ein wenig über das Ende des Pfades hinaus. Die Überstand ist gleich der halben Konturbreite (<code>stroke-width</code>).</li> + <li><code>round</code> erzeugt eine Rundung am Ende der Kontur. Der Radius dieser Runding hängt ebenfalls von <code>stroke-width</code> ab.</li> +</ul> + +<p>Die <code>stroke-linejoin</code> Eigenschaft kann verwendet werden, um zu kontrollieren wie Verbindung zweier Liniensegmente gezeichnet wird.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="none" stroke-linejoin="round"/> + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> +</svg></pre> + +<p>Im obigen Beispiel werden jeweils zwei Liniensegmente verbunden. Die Verbindung zwischen beiden wird durch das <code>stroke-linejoin</code> Attribut kontrolliert. Es gibt auch hier drei mögliche Werte. <code>miter</code> erweitert die Kontur leicht, um eine "quadratische Ecke" zu generieren, die nur einen Knick hat. <code>round</code> produziert eine abgerundete Ecke. <code>bevel</code> generiert eine glatte Kante am Übergang, wodurch zwei Knicke entstehen.</p> + +<p>Abschließend können auch gestrichelte (oder gepunktete) Konturen erstellt werden. Hierzu wird das <code>stroke-dasharray</code> Attribut genutzt.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg> +</pre> + +<p>Dem <code>stroke-dasharray</code> Attribut wird eine Liste von Zahlen übergeben, welche durch Kommas getrennt sind.</p> + +<div class="note"> +<p>Bemerkung: Anders als bei Pfaden <strong><em>müssen</em></strong> die Zahlen durch ein Komma getrennt werden (Leerzeichen werden ignoriert).</p> +</div> + +<p>Die erste Zahl gibt die Länge der gefüllten Bereiche an, die zweite Nummer die Länge der ungefüllten Bereiche. Im obigen Beispiel werden also 5 Pixel gefüllt, gefolgt von 5 Pixeln Leerbereich und dann dem nächsten 5 Pixel Strich. Es können mehr Zahlen angegeben werden, um ein komplexeres Muster zu erzeugen. Das erste Beispiel hat drei Zahlen. Der Renderer wiederholt die Zahlen hier zweimal, um ein gleichmäßiges Muster zu erzeugen. Hier werden zuerst 5 Pixel gefüllt, 10 Pixel leer, 5 Pixel gefüllt und dann 5 Pixel leer, 10 gefüllt und abschließend 5 Pixel leer gezeichnet. Dann wiederholt sich dieses Muster.</p> + +<p>Es gibt weitere Kontur- und Füllungseigenschaften, zum Beispiel <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, welche bestimmt welche Farbe überlagerte Formen bekommen; <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, welche festlegt ob eine Kontur miter zeichnet; <a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a> legt fest wo die Strichelung einer Kontur auf der Linie beginnt.</p> + +<h2 id="Using_CSS" name="Using_CSS">CSS verwenden</h2> + +<p>Neben der Möglichkeit Attribute beim Objekt selbst zu setzen, kann auch CSS zum Kontrollieren von Füllungen und Konturen verwendet werden. Attribute die sich mit dem Malen und dem Füllen befassen sind meist verfügbar, also können zum Beispiel <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... auf diese Weise verwendet werden, zusätzlich zu den Verlaufs- und Musterversionen von den unten gezeigten. Attribute wie <code>width</code>, <code>height</code> oder Pfadbefehle können durch CSS nicht verändert werden. Am einfachsten ist es durch Probieren herauszufinden welche Attribute in CSS verfügbar sind.</p> + +<div class="note style-wrap">Die <a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG Spezifikation</a> unterscheidet strikt zwischen Attributen, die <em>Eigenschaften</em> sind und anderen Attributen. Ersteres kann mit CSS verändert werden, letzteres nicht.</div> + +<p>CSS kann mit dem style Attribut direkt beim Element eingefügt werden:</p> + +<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> + +</pre> + +<p>oder es kann in eine spezielle Style-Sektion getan werden, welche eingebunden wird. Anstatt diesen dann in den <code><head></code> zu packen, wie in HTML, wird er in eine Sektion getan, welche <code><a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"><defs></a> </code>heißt.<code> <defs> </code>steht für Definitionen (definitions) und ist dafür da, dass Elemente erstellt werden können, welche nicht direkt im SVG auftauchen, aber von anderen Elementen genutzt werden können.</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ + #MyRect { + stroke: black; + fill: red; + } + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg> +</pre> + +<p>Styles in eine Sektion dieser Art zu bewegen kann es einfacher machen die Eigenschaften großer Elementgruppen anzupassen. Es können zusätzlich Dinge wie <strong>hover-Pseudoklassen</strong> genutzt werden, um Überrolleffekte zu erzeugen:</p> + +<pre class="brush:css;"> #MyRect:hover { + stroke: black; + fill: blue; + } + +</pre> + +<p>Es kann auch ein externes Stylesheet für CSS mit <a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normaler XML-Stylesheet Syntax</a> angegeben werden:</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg></pre> + +<p>dort könnte style.css etwa so aussehen:</p> + +<pre class="brush:css;">#MyRect { + fill: red; + stroke: black; +}</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> diff --git a/files/de/web/svg/tutorial/index.html b/files/de/web/svg/tutorial/index.html new file mode 100644 index 0000000000..26ae32b74a --- /dev/null +++ b/files/de/web/svg/tutorial/index.html @@ -0,0 +1,14 @@ +--- +title: Tutorial +slug: Web/SVG/Tutorial +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial +--- +<p>Dieses Tutorial beschreibt Version 1.1 der Scalable Vector Graphics, <a class="internal" href="/de/SVG" rel="internal" title="de/SVG">SVG</a>, ein W3C XML-Dialekt, die in Firefox 1.5, Opera 8.5 und anderen Browsern integriert ist.</p> +<p>Dieses Tutorial ist in einer <strong>sehr</strong> frühen Aufbauphase. Wenn Sie können, helfen Sie uns, indem Sie ein oder zwei Absätze schreiben. Extrapunkte gibt's für eine ganze Seite!</p> +<h5 id="Einführung">Einführung</h5> +<ul> <li><a class="internal" href="/De/SVG/Tutorial/Einführung" title="De/SVG/Tutorial/Einführung">Einführung</a> </li> <li><a class="internal" href="/De/SVG/Tutorial/Erste_Schritte" title="De/SVG/Tutorial/Erste Schritte">Erste Schritte</a></li> +</ul> +<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p> diff --git a/files/de/web/svg/tutorial/pfade/index.html b/files/de/web/svg/tutorial/pfade/index.html new file mode 100644 index 0000000000..fcf1e30859 --- /dev/null +++ b/files/de/web/svg/tutorial/pfade/index.html @@ -0,0 +1,239 @@ +--- +title: Pfade +slug: Web/SVG/Tutorial/Pfade +tags: + - Fortgeschritten + - HilfeBenötigt + - InhaltBenötigt + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>Das <a href="/en-US/Web/SVG/Element/path"><code><path></code></a> Element ist das mächtigste Element in der SVG Sammlung der <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegenden Elemente</a>. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.</p> + +<p>Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">Polylines</a> erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.</p> + +<p>Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegende Formen</a>). Das <code>"d"</code> Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.</p> + +<p>Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.</p> + +<p>Alle dieser Befehle gibt es in zwei Varianten. Ein <strong>Grossbuchstabe</strong> gibt absolute Koordinaten auf der Seite an und ein <strong>Kleinbuchstabe</strong> gibt relative Koordinaten (z.B. <em>verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links</em>).</p> + +<p>Koordinaten im <code>"d"</code> Attribute sind <strong>immer einheitslos</strong> und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.</p> + +<h2 id="Linienbefehle">Linienbefehle</h2> + +<p>Es gibt fünf Linienbefehle für <code><path></code> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :</p> + +<pre>M x y +</pre> + +<p>oder</p> + +<pre>m dx dy</pre> + +<p>Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Punkte --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit <code>L</code>. <code>L</code> benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.</p> + +<pre> L x y (oder l dx dy) +</pre> + +<p>Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. <code>H</code> zeichnet eine horizontale Line und <code>V</code> zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.</p> + +<pre> H x (oder h dx) + V y (oder v dy) +</pre> + +<p>Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <code><rect></code> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt<span style="line-height: 1.5;">:</span></p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Punkte --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit <code>Z</code> aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.</p> + +<pre> Z (oder z) +</pre> + +<p>Unser Pfad könnte also zu folgendem abgekürzt werden:</p> + +<pre class="brush: xml"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:</p> + +<pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.</p> + +<p>In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.</p> + +<h2 id="Kurvenbefehle">Kurvenbefehle</h2> + +<p>Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.</p> + +<h3 id="Bezier-Kurven">Bezier-Kurven</h3> + +<p>Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.</p> + +<pre> C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="syntaxbox"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.</p> + +<p>Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl <code>S</code> (oder <code>s</code>) definiert wird.</p> + +<pre> S x2 y2, x y (oder s dx2 dy2, dx dy) +</pre> + +<p><code>S</code> erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen <code>S</code>- oder <code>C</code>-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl <code>S</code> nicht einem anderen <code>S</code>- oder <code>C</code>-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der <code>Q</code>-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.</p> + +<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. <code>dx</code> und <code>dy</code> sind nicht relativ zu <code>dx1</code> und <code>dx2</code>).</p> + +<pre> Q x1 y1, x y (oder q dx1 dy1, dx dy) +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.</p> + +<pre> T x y (oder t dx dy) +</pre> + +<p>Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.</p> + +<div class="note"> +<p>Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.</p> +</div> + +<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.</p> + +<h3 id="Arcs" name="Arcs">Bögen</h3> + +<p>Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:</p> + +<pre> A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y + a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy +</pre> + +<p>An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie <a href="/en-US/Web/SVG/Element/ellipse">Ellipsen</a> nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.</p> + +<p>Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.</p> + +<p>Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.</p> + +<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> + <path d="M10 315 + L 110 215 + A 36 60 0 0 1 150.71 170.29 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> + <circle cx="150.71" cy="170.29" r="2" fill="red"/> + <circle cx="110" cy="215" r="2" fill="red"/> + <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> + <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> +</svg> +</pre> + +<p>Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.</p> + +<p>Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.</p> + +<p>Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.</p> + +<p>Falls sie SVG aus <a href="/de/HTML/Canvas">Canvas</a> herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/de/web/svg/tutorial/svg_image_tag/index.html b/files/de/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..040734ffc6 --- /dev/null +++ b/files/de/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,36 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +tags: + - Einsteiger + - JPG-Bilder einfügen + - SVG +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>Das SVG {{ SVGElement("image") }}-Element erlaubt es, Rasterbilder innerhalb von SVG-Objekten einzufügen.</p> + +<p>In diesem Beispiel wird ein .jpg-Bild, aufgerufen durch das {{ SVGAttr("xlink:href") }}-Attribut, in ein SVG-Objekt eingefügt:</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>Folgende wichtige Punkte müsse beachtet werden (festgelegt in den <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3-Spezifikationen</a>):</p> + +<ul> + <li> + <p>Wurde kein Attribut x (oder y) angegeben, wird dafür automatisch 0 gesetzt.</p> + </li> + <li> + <p>Wurde kein Attribut height (oder width) angegeben, wird dafür automatisch 0 gesetzt.</p> + </li> + <li>Ist das Attribut height (oder width) 0, wird das Rendern des Bildes deaktiviert.</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/de/web/svg/tutorial/svg_schriftarten/index.html b/files/de/web/svg/tutorial/svg_schriftarten/index.html new file mode 100644 index 0000000000..57d826cb5e --- /dev/null +++ b/files/de/web/svg/tutorial/svg_schriftarten/index.html @@ -0,0 +1,99 @@ +--- +title: SVG-Schriftarten +slug: Web/SVG/Tutorial/SVG_Schriftarten +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.</p> + +<p><strong>SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. </strong></p> + +<p> + </p><div class="note">Im Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">wurde eine Implementierung nicht berücksichtigt</a>, in <a href="https://www.chromestatus.com/feature/5930075908210688">Chrome 38 wurde sie entfernt</a> (auch in Opera 25) und Firefox hat es auf <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">unbestimmte Zeit verschoben</a>, um sich auf <a href="/en/WOFF" title="en/About WOFF">WOFF</a> konzentrieren zu können. Andere Tools jedoch wie <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.</div> +<p></p> + +<p>Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.</p> + +<h2 id="Eine_Schriftart_definieren">Eine Schriftart definieren</h2> + +<p>Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">aus der Spezifikation</a> und an ihm werden die Details erklärt.</p> + +<pre><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph> + <glyph unicode="@"><!-- Umrisslinie von @ --></glyph> + <!-- weitere Zeichen --> +</font> +</pre> + +<p>Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut <code>id</code>, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut <code>horiz-adv-x</code> legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert <code>1000</code> legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.</p> + +<p>Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut <code>font-family</code>, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels <code>font-family</code> den Zugriff auf die Schriftart. Die Attribute <code>font-weight</code> und <code>font-style</code> erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.</p> + +<p>Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem <code>src</code>-Descriptor bei <code>@font-face</code> in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.</p> + +<p>Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. </p> + +<p>Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut <code>d</code> hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim <code>path</code>-Tag geschieht.</p> + +<p>Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist <code>unicode</code>. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei <code>xml:lang</code>). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.</p> + +<p>Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in <code>font</code> eingesetzt werden. Beide benötigen die Attribute <code>u1</code> und <code>u2</code> und das Attribut <code>k</code>, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="Auf_eine_Schriftart_zugreifen">Auf eine Schriftart zugreifen</h2> + +<p>Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut <code>font-family</code> auf sie zugegriffen werden:</p> + +<pre><font> + <font-face font-family="Super Sans" /> + <!-- und so weiter --> +</font> + +<text font-family="Super Sans">Mein Text benutzt Super Sans</text> +</pre> + +<p>Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.</p> + +<h3 id="Option_CSS_font-face_benutzen">Option: CSS @font-face benutzen</h3> + +<p><code>@font-face</code> kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:</p> + +<pre><font id="Super_Sans"> + <!-- und so weiter --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">Mein Text benutzt Super Sans</text></pre> + +<h3 id="Option_Zugriff_auf_eine_externe_Schriftart">Option: Zugriff auf eine externe Schriftart</h3> + +<p>Das oben erwähnte <code>font-face-uri</code>-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:</p> + +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/de/web/svg/tutorial/tools_for_svg/index.html b/files/de/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..2fd2402d4b --- /dev/null +++ b/files/de/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,70 @@ +--- +title: Tools for SVG +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Nachdem nun die Grundlagen von SVG bekannt sind, soll ein Blick auf einige Tools geworfen werden, um mit SVG-Dateien zu arbeiten.</p> + +<h3 id="Browser_support">Browser support</h3> + +<p>Ab Internet Explorer 9 unterstützen alle großen Browser SVG: IE 9, Mozilla Firefox, Safari, Google Chrome und Opera. Mobile Geräte mit auf Webkit basierenden Browsern unterstützen auch SVG. Auf älteren oder kleineren Geräten besteht die Möglichkeit, dass SVG Tiny unterstützt wird.</p> + +<h2 id="Inkscape">Inkscape</h2> + +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> + +<p>One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it's open source.</p> + +<p>Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.</p> + +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> + +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> + +<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p> + +<h2 id="Apache_Batik">Apache Batik</h2> + +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> + +<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p> + +<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p> + +<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p> + +<h3 id="Other_renderers">Other renderers</h3> + +<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p> + +<h2 id="Raphael_JS">Raphael JS</h2> + +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> + +<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p> + +<h2 id="Snap.svg">Snap.svg</h2> + +<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p> + +<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p> + +<h2 id="Google_Docs">Google Docs</h2> + +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> + +<p>Zeichnungen können als SVG aus Google Docs exportiert werden.</p> + +<h2 id="Wissenschaft">Wissenschaft</h2> + +<p>Beide gut bekannten Plotting-Werkzeug xfig und gnuplot unterstützen den Export als SVG. Um Graphen online-Hilfe zu rendern, nutze man <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>, es unterstützt VML, SVG und canvas und entscheidet anhand des Browsers automatisch, welche Technologie dabei genutzt wird.</p> + +<p>In GIS-Anwendungen (Geographic Information System) wird SVG oft benutzt, um Daten sowohl zu speichern als auch fürs spätere Rendern. Für Näheres siehe <a class="external" href="http://carto.net">carto.net</a>.</p> + +<h2 id="Weitere_Tools!">Weitere Tools!</h2> + +<p>Beim W3C findet sich eine <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">Liste von Programmen</a>, die SVG unterstützen.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> |