How can I wrap a div tag inside a svg tag

user_16145565 0
Viewed 121

Is it possible to wrap a div tag inside a svg tag?

Here's what I have so far...

<div>
    <svg  style="width: 50px;height: 50px;border: solid black;">
        <div style="fill: blue;text-decoration: black">test</div>
    </svg>
</div>

I can't see the content of the inner div tag. Right clicking on the content in the Firefox browser shows it's there.

shows edit as svg

So are there any methods to show the div properly?

svg css html
2 Answers

If you want to display a div within some SVG content then you need to wrap the div with a foreignObject tag.

Here's your markup with that foreignObject tag added. I've also corrected the CSS properties in the inner div so that they do something.

<div>
  <svg  style="width: 50px;height: 50px;border: solid black;">
    <foreignObject width="100%" height="100%">
      <div style="background-color: blue;text-decoration: underline">test</div>
    </foreignObject>
  </svg>
</div>

user_10380150

You can't do this. Your html tag structure is wrong.

user_59522160
Related