Beispiel:SVG-Anw-Flaggen-8.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>SVG-Flaggen 8</title>
  <style>
    svg {
      display:table-cell;
       border: 1px solid #666;
       margin-right: 1em;
    }
  </style>	
</head>
 
<body>
<h1>Flaggen mit SVG darstellen - 8<br>Vorlagen mit symbol und g</h1>

<svg width="300" height="150" viewBox="0 0 400 200">
  <defs>
	  <clipPath id="t">
	    <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
      </clipPath>
	  
    <symbol id="unionjack" viewBox="0 0 58 28" >
      <desc>Union Jack Flagge Großbritanniens </desc>
      <rect id="hintergrund" width="60" height="30" fill="#00247d"/>
      <path id="andreaskreuz" d="M0,0 L60,30 M60,0 L0,30" stroke="white" stroke-width="6"/>
      <path id="patrickskreuz" d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
      <path id="georgskreuz1" d="M30,0 v30 M0,15 h60" stroke="white" stroke-width="10"/>
      <path id="georgskreuz2" d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
	</symbol>
	
    <g id="stern" >
      <path d="m60,70 l6-18 l-14-10 h17 l6-18 l6,18 h17 l-14,10 l6,18 l-15,-11 z" fill="#cf142b" stroke="white" stroke-width="3"/> 
	</g>
  </defs>
  
  <use href="#unionjack" />
</svg>

<svg width="300" height="150" viewBox="0 0 400 200">
  <desc>Flagge Neuseelands </desc>
  <rect x="0" y="0" width="400" height="200" fill="#00247d" />
  <use href="#unionjack" transform="scale(0.5,0.5)" />
  <use href="#stern" transform="translate(255,130) scale(0.6)"/>
  <use href="#stern" transform="translate(263,15) scale(0.5)"/>
  <use href="#stern" transform="translate(308,55) scale(0.4)"/>
  <use href="#stern" transform="translate(217,62) scale(0.5)"/>  
</svg>

<p> Die Flaggen Großbritanniens und Neuseelands - Der <em>Union Jack</em> wird als <code>symbol</code> festgelegt und jeweils in den passenden Größen eingebunden.</p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Anw-Flaggen-8.html&oldid=86763“