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

text { 

 font-family:verdana;	
 font-size: 24px;

} path { fill:none; stroke: #337599; stroke-width: 1; }

g ellipse { 

 fill:none;
 stroke: black;
 stroke-width: 2;

} g text { 

 text-anchor:middle;
 font-weight: bold;

} 

 </style>
 <title>Text ausrichten mit text-anchor</title>

</head>

<body>

Text ausrichten mit text-anchor

<svg viewBox="0 0 600 500"> 

   <path d="M200,20 v150"/>

   <text x="200" y="50" text-anchor="start">
     start
   </text>
   <text x="200" y="100" text-anchor="middle">
     middle
   </text>
   <text x="200" y="150" text-anchor="end">
     end
   </text>

   <g>
     <text x="250" y="250">Anwendungsbeispiel:</text>
     <text x="250" y="280">KFZ-Nationalitätenkennzeichen</text>
   </g>
   <g>
     <ellipse cx="100" cy="400" rx="40" ry="25"/>
     <text x="100" y="410">B</text>
   </g>
   <g>
     <ellipse cx="300" cy="350" rx="40" ry="25"/>
     <text x="300" y="360">NL</text>
   </g>
   <g>
     <ellipse cx="500" cy="400" rx="40" ry="25"/>
     <text x="500" y="410">LUX</text>
   </g>
 </svg>

</body> </html>

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