User:Lilyuserin/SVG/masken
Die Verwendung von Masken in SVG ist für mich schwierig zu erfassen, ich will zu einem Status kommen, dass es funktioniert, ohne dass ich groß alles verstehen muss.
Links
[edit]- konvexe Formen in SVG um einen Punkt rotieren: eine Herangehensweise ohne Masken, die bei komplexeren Formen nicht funktioniert
- Clipping, Masking and Compositing auf w3.org
- SVG/ Ausschnitt Maskierung und Komposition auf Wikibooks
- SVG Masken
- Maskentutorial
- Kategorie SVGs mit Masken auf Commons
Erklärung
[edit]Eine konvexe Ausgangsform wird um ihre Spitze gedreht. Damit die Form, die zuoberst liegt, scheinbar unter die erste zu liegen kommt, muss der Anteil, der die um 0o gedrehte Form überdeckt, durch eine Maske abgedeckt werden. Ein genügend großes Rechteck wird mit der Farbe Weiß gefüllt (was 100% Abdeckung bedeutet), die Ausgangsform wird aus diesem Rechteck sozusagen ausgestanzt mit der Füllfarbe Schwarz. Falls die Überdeckung nicht ausreicht, muss die ein oder mehrmals gedrehte Form ebenfalls „ausgestanzt“ werden, je nach Drehwinkel und Ausdehnung der Ausgangsform.
Anhand des Codes kann man die Systematik nachvollziehen. Es gibt eine konvexe Ausgangsform, genannt Zwickel. Diese wird um ihre Spitze gedreht und ergibt eine Art Blütenblatt. Die Maske ergibt sich aus mehreren überlagerten Zwickeln, je nach Drehwinkel. In die Maskenüberdeckung mit reingenommen müssen dann so viele Formen werden als in der Maske enthalten sind. Man kann leicht ausprobieren, wie viele Zwickel nötig sind, damit es keine unerwünschten Effekte gibt. Ich habe mir noch nicht die Mühe gemacht, die Anzahl der Zwickeln in Abhängigkeit vom Winkel auszurechnen.
Außerdem muss man darauf achten, dass das Hintergrundrechteck mit der weißen Füllung groß genug ist, sonst erhält man u.u. Kanten im Bild.
Blumenblatt aus 12 um 30o gedrehten Kreissegmenten
[edit]Meine erste SVG-Datei mit Anwendung von Masken.
SVG-Code
[edit]<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="https://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="540"
width="540"
version="1.1">
<defs>
<path id="zwickel"
d="M0 0
a156,156 0 0,0 0,270
a156,156 0 0,0 0,-270
" />
<mask id="maske">
<rect x="-100" y="-100" width="500" height="500" fill="#fff" />
<use xlink:href="#zwickel" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(30)" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(60)" fill="#000" />
</mask>
</defs>
<g stroke="none"
transform="translate(270,270)" >
<use xlink:href="#zwickel" fill="#f00" />
<use xlink:href="#zwickel" fill="#f80"
transform="rotate(30)" />
<use xlink:href="#zwickel" fill="#fc0"
transform=" rotate(60)" />
<use xlink:href="#zwickel" fill="#8f0"
transform=" rotate(90)" />
<use xlink:href="#zwickel" fill="#0f0"
transform=" rotate(120)" />
<use xlink:href="#zwickel" fill="#0f8"
transform=" rotate(150)" />
<use xlink:href="#zwickel" fill="#0ff"
transform=" rotate(180)" />
<use xlink:href="#zwickel" fill="#08f"
transform=" rotate(210)" />
<use xlink:href="#zwickel" fill="#00f"
transform="rotate(240)" />
<g mask="url(#maske)">
<use xlink:href="#zwickel" fill="#80f"
transform="rotate(270)" />
<use xlink:href="#zwickel" fill="#f0f"
transform="rotate(300)" />
<use xlink:href="#zwickel" transform="rotate(-30)" fill="#f08" opacity="1" />
</g>
<circle r="40" fill="#ff0" />
</g>
</svg>
Blumenblatt aus 24 um 15o gedrehten Kreissegmenten
[edit]
SVG-Code
[edit]<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="https://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="540"
width="540"
version="1.1">
<defs>
<path id="zwickel"
d="M0 0
a156,156 0 0,0 0,270
a156,156 0 0,0 0,-270
" />
<mask id="maske">
<rect x="-200" y="-200" width="700" height="700" fill="#fff" />
<use xlink:href="#zwickel" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(15)" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(30)" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(45)" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(60)" fill="#000" />
<use xlink:href="#zwickel" x="0" y="0" transform="rotate(75)" fill="#000" />
</mask>
</defs>
<g stroke="none"
transform="translate(270,270)" >
<use xlink:href="#zwickel" fill="#f00" />
<use xlink:href="#zwickel" fill="#f04"
transform="rotate(15)" />
<use xlink:href="#zwickel" fill="#f08"
transform=" rotate(30)" />
<use xlink:href="#zwickel" fill="#f0c"
transform=" rotate(45)" />
<use xlink:href="#zwickel" fill="#f0f"
transform=" rotate(60)" />
<use xlink:href="#zwickel" fill="#c0f"
transform=" rotate(75)" />
<use xlink:href="#zwickel" fill="#80f"
transform=" rotate(90)" />
<use xlink:href="#zwickel" fill="#40f"
transform=" rotate(105)" />
<use xlink:href="#zwickel" fill="#80f"
transform=" rotate(120)" />
<use xlink:href="#zwickel" fill="#c0f"
transform=" rotate(135)" />
<use xlink:href="#zwickel" fill="#f0f"
transform=" rotate(150)" />
<use xlink:href="#zwickel" fill="#f0c"
transform=" rotate(165)" />
<use xlink:href="#zwickel" fill="#f08"
transform=" rotate(180)" />
<use xlink:href="#zwickel" fill="#f04"
transform=" rotate(195)" />
<use xlink:href="#zwickel" fill="#f08"
transform=" rotate(210)" />
<use xlink:href="#zwickel" fill="#f0c"
transform=" rotate(225)" />
<use xlink:href="#zwickel" fill="#f0f"
transform=" rotate(240)" />
<g mask="url(#maske)">
<use xlink:href="#zwickel" fill="#c0f"
transform=" rotate(255)" />
<use xlink:href="#zwickel" fill="#80f"
transform=" rotate(270)" />
<use xlink:href="#zwickel" fill="#40f"
transform=" rotate(285)" />
<use xlink:href="#zwickel" fill="#80f"
transform="rotate(-60)" />
<use xlink:href="#zwickel" fill="#c0f"
transform="rotate(-45)" />
<use xlink:href="#zwickel" fill="#f0f"
transform="rotate(-30)" />
<use xlink:href="#zwickel" transform="rotate(-15)" fill="#f08" opacity="1" />
</g>
</g>
</svg>