Beispiel:SVG-text-7.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>

text { 

 font-family: sans-serif;
 font-size: 145px;
 font-weight:bold;
 font-weight:900;
 stroke: black;
 stroke-width: 1;

} 

 </style>
 <title>SVG - Text mit Muster als Hintergrund</title>

</head>

<body>

SVG - Text mit Muster als Hintergrund

<svg viewBox="0 0 880 450"> 

 <defs>
   <pattern id="karo" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="10" height="10" fill="#dfac20"/>
     <rect x="10" y="0" width="10" height="10" fill="#306f91"/>
     <rect x="20" y="0" width="10" height="10" fill="#c32e04"/>

     <rect x="0" y="10" width="10" height="10" fill="#c32e04"/>
     <rect x="10" y="10" width="10" height="10" fill="#5a9900"/>
     <rect x="20" y="10" width="10" height="10" fill="#dfac20"/>

     <rect x="0" y="20" width="10" height="10" fill="#306f91"/>      
     <rect x="10" y="20" width="10" height="10" fill="#c32e04"/>      
     <rect x="20" y="20" width="10" height="10" fill="#5a9900"/>      
   </pattern>
   <pattern id="punkte" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="30" height="30" fill="#306f91"/>
     <circle cx="15" cy="5" r="3" fill="#dfac20"/>
     <circle cx="25" cy="5" r="3" fill="#c32e04"/>

     <circle cx="5" cy="15" r="3" fill="#c32e04"/>
     <circle cx="15" cy="15" r="3" fill="#5a9900"/>
     <circle cx="25" cy="15" r="3" fill="#dfac20"/>

     <circle cx="5" cy="25" r="3" fill="#dfac20"/>      
     <circle cx="15" cy="25" r="3" fill="#c32e04"/>      
     <circle cx="25" cy="25" r="3" fill="#5a9900"/>      
   </pattern>
 </defs>

 <text fill="url(#karo)"   x="0" y="170" >SELFHTML</text>
 <text fill="url(#punkte)" x="0" y="350" >SELFHTML</text>

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

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