Beispiel:SVG-34-symbol.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>