Bitte warten...

SVG: Klone und Masken

Elemente oder Gruppen klonen

► W3C-Empfehlung: <use>

Das <use>-Element wird dazu verwendet, ein im <defs>-Bereich definiertes Element (das auch eine Gruppe sein kann) zu klonen (oder besser gesagt: zu instanzieren). Dadurch kann es mehrfach und an verschiedenen Positionen gerendert werden, was so zusätzlich auch zu übersichtlicherem und sparsamerem Quelltext führt.

Das referenzierte Element wird ohne Referenz auch nicht gerendert. Es muss dazu explizit im Attribut xlink:href des <use>-Elements angegeben werden. Um dieses Attribut verwenden zu können, muss im <svg>-Element das entsprechende Attribut xmlns:xlink für den zugehörigen XML-Namensraum vorhanden sein.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='350px' height='180px'>
  <defs>
    <radialGradient id='grad3' r='50%' cx='50%' cy='50%' fx='50%' fy='50%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </radialGradient>
    <g id='composition'>
      <rect width='150' height='65' rx='10' fill='url(#grad3)' stroke='yellow' stroke-width='4' stroke-opacity='1' />
      <text x='10' y='25' font-family='sans-serif' font-size='16' fill='yellow'>Hallo Welt</text>
    </g>
  </defs>
  <g>
    <use x='15'  y='15' xlink:href='#composition' />
    <use x='185' y='15' xlink:href='#composition' />
    <use x='15'  y='100' xlink:href='#composition' />
    <use x='185' y='100' xlink:href='#composition' />
  </g>
</svg>
Beispiel für SVG-Klonen

Verwendung von Masken

► W3C-Empfehlung: <mask>

Eine Maske, die durch das <mask>-Element definiert wird, deckt alle unter ihr verborgenen Elemente ab. Enthält sie ein Element mit der Füllfarbe weiß (fill='white'), so wird die Maske in diesem Bereich transparent und die darunter befindlichen Elemente werden sichtbar.

Das Element oder die Gruppe, auf die eine Maske angewendet werden soll, referenziert die Maske in dem Attribut mask über die ID der Maske selbst.

Im ersten Beispiel hat das in der Maske enthaltene <circle>-Element das Attribut fill='white'. Im zweiten Beispiel ist es das <rect>-Element.

Hinweis: Inkscape erwartet, dass das Element mit fill='white' das erste Kind von <mask> ist, da es sonst zu Darstellungsproblemen kommt.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='350px' height='180px'>
  <defs>
    <mask id='clip'>
      <rect x='0' y='0' width='100%' height='100%' />
      <circle fill='white' cx='50%' cy='50%' r='70' />
    </mask>
    <radialGradient id='grad3' r='50%' cx='50%' cy='50%' fx='50%' fy='50%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </radialGradient>
    <g id='composition'>
      <rect width='150' height='65' rx='10' fill='url(#grad3)' stroke='yellow' stroke-width='4' stroke-opacity='1' />
      <text x='10' y='25' font-family='sans-serif' font-size='16' fill='yellow'>Hallo Welt</text>
    </g>
  </defs>
  <g mask='url(#clip)'>
    <use x='15'  y='15' xlink:href='#composition' />
    <use x='185' y='15' xlink:href='#composition' />
    <use x='15'  y='100' xlink:href='#composition' />
    <use x='185' y='100' xlink:href='#composition' />
  </g>
</svg>
Beispiel für SVG-Maskierung Beispiel für SVG-Maskierung