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

Klone in HTML-Dokumenten

Mit Hilfe dieser Technik lassen sich beispielsweise Symbole in HTML-Dokumenten darstellen, ohne diese als externe Dateien referenzieren zu müssen. Die Symbole können direkt im Quelltext in einem unsichtbaren SVG-Container definiert und mit <use> an beliebiger Stelle im Dokument referenziert werden.

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
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Test</title>
    <meta charset='UTF-8'>
    <style>
      body { background-color:silver; }
      p { font-size:20px; line-height:1.3; }
      #symbols { display:none; }
      .symbol { position:relative; display:inline-block; transform:translate(0px,-40px); width:80px; }
      .symbol.small { transform:scale(.5) translate(-20px,-44px); width:40px; }
      .symbol.big { transform:scale(2) translate(40px,-20px); width:160px; }
      .symbol svg { position:absolute; }
    </style>
  </head>
  <body>
    <svg id='symbols'>
      <g id='zeichen205'>
        <path stroke='white' stroke-width='5' fill='white' stroke-linejoin='round' d='M 5.00 5.00 L 75.00 5.00 L 40.00 65.62 Z' />
        <path stroke='red' stroke-width='4' fill='red' stroke-linejoin='round' d='M 5.00 5.00 L 75.00 5.00 L 40.00 65.62 Z M 12.00 9.04 L 40.00 57.54 L 68.00 9.04 Z' />
      </g>
      <g id='zeichen283'>
        <circle stroke='white' stroke-width='7.5' fill='white' cx='40.00' cy='35.00' r='30.00' />
        <circle stroke='red' stroke-width='8.5' fill='blue' cx='40.00' cy='35.00' r='29.00' />
        <line stroke='red' stroke-width='6.5' x1='18.79' y1='13.79' x2='61.21' y2='56.21' />
        <line stroke='red' stroke-width='6.5' x1='61.21' y1='13.79' x2='18.79' y2='56.21' />
      </g>
    </svg>
    <p>Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd.</p>
    <p>Lsdfds dsfdsfsdf dfsdfsf. <span class='symbol'><svg><use xlink:href='#zeichen205' /></svg></span> Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd.</p>
    <p>Lsdfds dsfdsfsdf dfsdfsf. <span class='symbol small'><svg><use xlink:href='#zeichen205' /></svg></span> Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf df <span class='symbol small'><svg><use xlink:href='#zeichen205' /></svg></span><span class='symbol small'><svg><use xlink:href='#zeichen283' /></svg></span> sdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd. Lsdfds dsfdsfsdf dfsdfsf. Sdsdsf dsfsdfsd dsfsdffd ssdf sdfsd.</p>
    <p>Esfdsdd sfsdf<span class='symbol big'><svg><use xlink:href='#zeichen205' /></svg></span><span class='symbol big'><svg><use xlink:href='#zeichen283' /></svg></span>Hsdf sdfsdfsdf.</p>
  </body>
</html>

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