Beispiel:SVG-34-symbol.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
svg {
height: 100vh;
width: 100%;
}
html, body, svg {
margin: 0;
padding: 0;
}
</style>
<title>Osterwiese</title>
</head>
<body>
<svg viewBox="0 0 880 500">
<desc>Beispiel: Aufrufen von symbol-Elementen mit use</desc>
<defs>
<symbol id="ei">
<path d="M1,91 a 60,60 0 0 0 120,0 a 60,90 0 1 0 -120,0" stroke="black" stroke-width="1"/>
</symbol>
<symbol id="tulpe" stroke="black" stroke-width="1">
<path d="M40,60 c0,0 -5,-20 12,-30 c10,10 15,20 15,75 h-30" />
<path d="M55,80 c5,-20 20,-50 33,-50 c30,140 -93,110 -73,8 c20,0 55,55 47,86 " />
</symbol>
<symbol id="stengel" stroke="black" stroke-width="1" fill="url(#gruen)">
<path d="M55,125 c10,10 16,60 15,80 h8 c0,-10 0,-60 -12,-80" />
<path d="M50,265 c0,-30 6,-60 60,-110 c-40,50 6,90 -60,110 c-40,-50 26,-90 -45,-150 c70,30 50,100 55,100" />
</symbol>
<radialGradient id="rot" cx="88%" cy="45%">
<stop offset="0%" stop-color="silver" />
<stop offset="100%" stop-color="#c32e04" />
</radialGradient>
<radialGradient id="gruen" cx="88%" cy="45%">
<stop offset="0%" stop-color="silver" />
<stop offset="100%" stop-color="#5a9900" />
</radialGradient>
<radialGradient id="gelb" cx="88%" cy="45%">
<stop offset="0%" stop-color="silver" />
<stop offset="100%" stop-color="#dfac20" />
</radialGradient>
<radialGradient id="blau" cx="88%" cy="45%">
<stop offset="0%" stop-color="silver" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<linearGradient id="hintergrund" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="white" />
<stop offset="10%" stop-color="#e6f2f7" />
<stop offset="50%" stop-color="#5c82d9" />
<stop offset="50%" stop-color="#8db243 " />
<stop offset="100%" stop-color="#ebf5d7" />
</linearGradient>
</defs>
<rect x="0" y="0" width="880" height="500" fill="url(#hintergrund)" />
<g fill="url(#gelb)" transform="translate(0,0)">
<use href="#tulpe" />
<use href="#stengel" />
</g>
<g fill="url(#rot)" transform="translate(200,0) scale(-1,1)" >
<use href="#tulpe" />
<use href="#stengel" />
</g>
<g fill="url(#blau)" transform="translate(620,30)rotate(-20)">
<use href="#tulpe" />
<use href="#stengel" />
</g>
<g fill="url(#gelb)" transform="translate(850,10) scale(-1,1)" >
<use href="#tulpe" />
<use href="#stengel" />
</g>
<use fill="url(#rot)" href="#ei" transform="translate(70,220) rotate(-10,50,30) scale(.5,.5)" />
<use fill="url(#gelb)" href="#ei" transform="translate(30,250) scale(.5,.5)" />
<use fill="url(#blau)" href="#ei" transform="translate(100,250) rotate(30,50,50) scale(.5,.5)" />
<g transform="translate(600,360) scale(.5,.5)">
<use fill="url(#gelb)" href="#ei" transform="translate(0,0)" />
<use fill="url(#blau)" href="#ei" transform="translate(100,50) rotate(30,50,50)" />
<use fill="url(#rot)" href="#ei" transform="translate(-100,50) rotate(-30,50,30)" />
<use fill="url(#gruen)" href="#ei" transform="translate(0,100) rotate(-10)" />
</g>
</svg>
</body>
</html>