nikalldway nikalldway - 1 year ago 107
CSS Question

How to embed html code between SVG tags

My application was in VML which allowed me to embed html between VML tags. But VML only supports till IE-8. Now I have converted VML to SVG using vectorconverter. But SVG doesn't allows to embed html tag between the SVG tags. After searching on stack and google I came across for using foreignobject tags, However it also only supports till IE-8. I also tried using switch tag placing above foreignobject tags but it to did not worked. Is there any way where I can embed the html code between SVG tags ie below. Thanks in advance

<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<svg width="500" height="300" style="border:1px red solid">
<foreignobject class="node" x="46" y="22" width="100" height="100">

<div style="border:1px green solid">I'm a div inside a SVG.</div>
<div>Interesting! But you a Foreign Object.</div>

Answer Source

You can achieve this using CSS only. See the attached jsFiddle. I have left your example in for reference above the html/css implementation.

<div class="container">
  <div class="inner">
    <span>I'm a div inside a SVG.</span>

.container {
  height: 300px;
  width: 500px;
  border:1px red solid

.inner {
  border:1px green solid;
  position: relative;
  top: 22px;
  left: 46px;
  width: 100px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download