Beispiel:SVG-Anwendung-text-2.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: 450px;
  }
 
text {
  font-size: 150px;
  font-weight: bold;
  font-weight: 900;
  stroke: black;
  stroke-width: 4;
}
  </style>
  <title>SVG - animierter Verlauf</title>
</head>
 
<body>
  <h1>SVG - animierter Verlauf</h1>
 
<svg viewBox="0 0 880 450">
  <defs>
    <linearGradient id="verlauf" >
       <stop offset="0" stop-color="#dfac20">
         <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="#dfac20">
         <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 von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Anwendung-text-2.html&oldid=86775“