Beispiel:SVG-CSS-4.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"> <title>SVG und custom properties</title> </head>

<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 260"> 

 <title>SVG und custom properties</title>
 
 <metadesc/>
 <defs>
   <style type="text/css">
     .stylesheet {
       fill: var(--gold);
       stroke: var(--blue);
       stroke-width: calc(1.5px * var(--width));
     }
     svg {
       --blue: steelBlue;
       --green: #8db243;
       --red: #c82f04;
       --gold: gold;
       --width: 5;
       border: thin dotted var(--blue);
     }
     text {
       font-family: Helvetica, Arial, sans-serif;
     }
   </style>
   
   <symbol xmlns="http://www.w3.org/2000/svg" id="circle" height="95" width="95" viewBox="-50 -50 99 99">
     <circle x="47" y="47" r="45"/>
   </symbol>
 </defs>

 <rect class="one" x="10" width="90" height="90" fill="var(--gold)" stroke="var(--green)" stroke-width="calc(0.5px * var(--width)" y="10"/>
 <text x="10" y="120">im XML-Attribut</text>
 
 <rect class="inline" x="200" y="10" width="90" height="90" style="fill: var(--gold);stroke: var(--red);stroke-width: var(--width);"/>
 <text x="200" y="120">im style-Attribut</text>
 
 <rect class="stylesheet" x="390" y="10" width="90" height="90"/>
 <text x="390" y="120">im Stylesheet</text>
 
 <use href="#circle" x="10" y="140" fill="var(--gold)" stroke="var(--green)" stroke-width="var(--width)"/>
 <text x="10" y="250">XML-Attribut für use</text>
 
 <use class="stylesheet" href="#circle" x="390" y="140"/>
 <text x="390" y="250">im Stylesheet</text>

</svg>

</body> </html>

Abgerufen am 26.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-CSS-4.html"