Insert HTML Code Inside Svg Text Element

HTML inside SVG

There you go!

.wrapper{    position: relative;    width: 100px;    height: 100px;}.text{    position: absolute;    display: flex;    align-items: center;    justify-content: center;    top: 0px;    bottom: 0px;    left: 0px;    right: 0px;    color: white;}
<div class="wrapper"><svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" /></svg><div class="text">TEXT</div></div>

Can I embed HTML into an HTML5 SVG fragment?

Yes, with the <foreignObject> element, see this question for some examples.

Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience.

How to embed html code between SVG tags

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;

Placing text inside svg using appendChild()

Improved positioning of text for demo.

var mysvg = document.getElementById("mysvg");
var myTextElement = document.createElementNS("", "text");var myText = document.createTextNode("How are you?");myTextElement.setAttribute("x", "0");myTextElement.setAttribute("y", "110");myTextElement.setAttribute("fill", "blue");myTextElement.setAttribute("font-family", "Verdana");myTextElement.setAttribute("font-size", "55");
circle {  fill-opacity: 0.5;  stroke-width: 4;  fill: #3080d0;  stroke: #3080d0;  opacity: 0.6;}
<svg id="mysvg" version="1.1" xmlns="" width="400" height="300">  <circle id="my-circle" cx="100" cy="100" r="50" />  <text x="0" y="55" font-family="Verdana" font-size="55" fill="blue"> Hello </text></svg>

HTML element inside SVG not displayed

Short answer

Specify the namespace in all tags in a foreignObject: replace .append("p") by .append("xhtml:p") and it will work:

Long answer

In the context of foreign objects, <p></p> is not recognized as a xhtml paragraph. Why? Simply because the namespace xhtml is not included in the foreignObject context (a foreignObject might contain anything (xml formated data for example) so it doesn't consider the input as html if you don't explicitly say it.).

So the p tag is considered as a custom tag, not as a xhtml tag. Thus, as the web browser doesn't recognize the tag p in the tags it knows, so it just doesn't interpret it and its content, even if it exists, it won't throw an error as well because this content might be totally valid, just not for its direct use.

It is fun to see that you always specify the namespace svg even if it is not necessary and how we all forget that the p, div... also have a very popular namespace.

The selection.html() function doesn't work because in its implementation it uses the .innerHTML() function of the element, but here, the foreignObject, not being an html element, doesn't have such a function.


This works fine for me:

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML in SVG in HTML</title>
<style type='text/css'>
svg { border: 1px solid black; }
svg div { border: 1px dotted blue; }
<svg xmlns="" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="">
<div>The quick brown fox jumps over the lazy dog. Pack my box with
five dozen liquor jugs</div>

Related Topics

Leave a reply