User:Lilyuserin/SVG/rotate

Links

• Masken in SVG verwenden: wenn diese Vorgangsweise nicht funktioniert, hier weiterlesen
• 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

Man nehme eine beliebige Form, beispielsweise dieses Bezierherz

<path id="heart"
   d="M0,0
   C150,250 300,100 200,0
   C300,-100 150,-250 0,0
   z" />

und rotiere sie um einen Teiler von 360^o.

Das Ergebnis ist eine nette Figur, die einen kleinen Nachteil hat. Die letzte Form überdeckt die erste, sodass eine Form komplett zu sehen ist, während von der ersten zwei Zwickel weggeschnitten werden.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="493" width="475" >
 <defs>
 <path id="heart"
   d="M0,0
   C150,250 300,100 200,0
   C300,-100 150,-250 0,0
   z" />
 </defs>
  <g
     transform="translate(243,247)"
     id="redheart">
   <use fill="#f00" xlink:href="#heart" />
   <use fill="#0f0" transform="rotate(72)" xlink:href="#heart" />
   <use fill="#0ff" transform="rotate(144)" xlink:href="#heart" />
   <use fill="#00f" transform="rotate(216)" xlink:href="#heart" />
   <use fill="#f0f" transform="rotate(288)" xlink:href="#heart" />
  </g>
</svg>

Um diesen Makel zu beheben, war meine erste Idee, die Differenz zwischen zwei aufeinanderfolgenden Figuren zu bilden. SVG bietet keine einfache Möglichkeit, um das durchzuführen, es gibt allerdings eine Funktion, die den Durchschnitt zweier Formen bildet, Clipping, Masking and Compositing.

Ich bilde die Differenz zwischen der ersten und der letzten Form, färbe sie in der Farbe der ersten Form und lege sie zuoberst, somit erziele ich den gewünschten Effekt.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="493" width="475" >
 <defs>
 <path id="heart"
   d="M0,0
   C150,250 300,100 200,0
   C300,-100 150,-250 0,0
   z" />
   <clipPath id="svgPath" >
     <use  xlink:href="#heart" transform="rotate(-72)"/>
   </clipPath>
 </defs>
  <g
     transform="translate(243,247)"
     id="redheart">
   <use fill="#f00" xlink:href="#heart" />
   <use fill="#0f0" transform="rotate(72)" xlink:href="#heart" />
   <use fill="#0ff" transform="rotate(144)" xlink:href="#heart" />
   <use fill="#00f" transform="rotate(216)" xlink:href="#heart" />
   <use fill="#f0f" transform="rotate(288)" xlink:href="#heart" />
   <use clip-path="url(#svgPath)"
     style="fill:#f00;"
     xlink:href="#heart" />
  </g>
</svg>

Einen Clippath mit dem gleichen Pfad bilden wie die Ausgangsform, um den negativen Winkel drehen, in der Farbe der zu viel verdeckten Form einfärben und zuoberst anordnen.

Diese Vorgangsweise funktioniert nicht mehr, sobald sich die Formen mehrfach überlappen, dazu braucht es Masken.