Beispiel:SVG-text-1.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">
  <style>
svg { 
  width: 100%;
  height: 250px;
  }
text {
  font-family:serif;	
  font-size: 120px;
  font-weight: bold;
}
#eins {
  fill: url(#verlauf);
  }
tspan {
  font-size: 90px;
}  
#zwei {
  fill: #ffebe6;
  stroke: #c82f04;
  stroke-width: 3;
  font-family: sans-serif;
  font-size: 160px; 
  font-weight: bold;
  }

  </style>
  <title>Beispiel: Text in SVG</title>
</head>
 
<body>
  <h1>Text in SVG</h1>
 
  <svg viewBox="0 0 750 250">
    <defs>
	    <linearGradient id="verlauf">
      <stop offset="0.1" stop-color="#306f91 "/>
      <stop offset="0.1" stop-color="#dfac20 "/>
      <stop offset=".64" stop-color="#dfac20 "/>
      <stop offset=".80" stop-color="#306f91 "/>
    </linearGradient> 
	</defs>

	<text id="eins" x="10" y="120"> TEXT
		<tspan dx="-40" dy=".5em">in</tspan>
	</text>
	<circle cx="10" cy="120" r="3" style="fill:#c32e04" />
	<path d="M10,120 h300" style="stroke:#c32e04;stroke-width:1;" />
	<text id="zwei" x="400 520 620" y="120 170 220"> SVG </text>
</svg>
 
<p>Die Grundlinie ist durch die dünne rote Linie gekennzeichnet. Bei einem y-Wert von 0 wäre der Text oberhalb des Anzeigebereichs.</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-1.html&oldid=100059“