Beispiel:SVG-text-6.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:Grundlayout.css">
 <style>

svg { 

 height: 450px;
 }

text { 

 font-size: 150px;
 font-weight: bold;
 font-weight: 900;
 stroke: black;
 stroke-width: 4;

} 

 </style>
 <title>SVG - animierter Verlauf</title>

</head>

<body> <svg viewBox="0 0 880 450"> 

 <defs>
   <linearGradient id="verlauf" >
      <stop offset="0" stop-color="gold">
        <animate attributeName="offset" from="0" to="1" begin="1.5s" dur="3s" fill="freeze"/>
      </stop> 
      <stop offset="0" stop-color="black">
        <animate attributeName="offset" from="0" to="1" begin="0.5s" dur="2s" fill="freeze"/>
      </stop> 
    </linearGradient>

<linearGradient id="verlaufVertikal" x1="0" y1="0" x2="0" y2="1"> 

      <stop offset="0" stop-color="gold">
        <animate attributeName="offset" from="0" to="1" begin="1.5s" dur="3s" fill="freeze"/>
      </stop> 
      <stop offset="0" stop-color="black">
        <animate attributeName="offset" from="0" to="1" begin="0.5s" dur="2s" fill="freeze"/>
      </stop> 
    </linearGradient> 
 </defs>

 <text fill="url(#verlauf)" font-family="sans serif"  x="2%" y="30%">waagerecht</text>
 <text fill="url(#verlaufVertikal)" font-family="sans serif"  x="2%" y="70%">senkrecht</text>

</svg> </body> </html>

Abgerufen am 28.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-text-6.html"