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;

}

  1. eins {
 fill: url(#verlauf);
 }

tspan { 

 font-size: 90px;

}

  1. 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>

Text in SVG

 <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>

Die Grundlinie ist durch die dünne rote Linie gekennzeichnet. Bei einem y-Wert von 0 wäre der Text oberhalb des Anzeigebereichs.

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-1.html&oldid=100059“