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

svg { 

 background: white;
 border: thin dotted #337599;
 width: calc(100% - 2rem);
 height: 350px;
 margin: 1rem;
 }

 </style>
 <title>Beispiel: Einbindung von XHTML mit foreignObject</title>

</head>

<body>

Einbindung von XHTML mit foreignObject

 <svg>
   <rect x="10" y="10" width="200" height="150" fill="skyblue"/>
   <foreignObject x="20" y="10" width="180" height="170">
     <body xmlns="http://www.w3.org/1999/xhtml">

mehrzeiliger Text

Dies ist ein Textabsatz mit einem fetten Wort und automatischem Zeilenumbruch.

     </body>
   </foreignObject>

   <circle cx="300" cy="200" r="110" fill="gold"/>
   <foreignObject x="230" y="120" width="180" height="180">

Liste

  1. Listenelement
  2. Listenelement
  3. Listenelement
   </foreignObject>
 </svg>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-30-foreignObject.html&oldid=99970“