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;}
<html><body>
<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>
</body></html>
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.
https://jsfiddle.net/Lwtb9w5s/
<div class="container">
<div class="inner">
<span>I'm a div inside a SVG.</span>
</div>
</div>
.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("http://www.w3.org/2000/svg", "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");
myTextElement.appendChild(myText);mysvg.appendChild(myTextElement);
circle { fill-opacity: 0.5; stroke-width: 4; fill: #3080d0; stroke: #3080d0; opacity: 0.6;}
<svg id="mysvg" version="1.1" xmlns="http://www.w3.org/2000/svg" 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: http://jsfiddle.net/EHzcR/2/
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.
HTML in SVG in HTML
This works fine for me:
<!DOCTYPE html>
<html>
<head>
<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; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with
five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>
</body>
</html>
Related Topics
Height: 100% for <Div> Inside <Div> with Display: Table-Cell
How to Create a Teardrop in HTML
Remove .HTML and .PHP Extensions with .Htaccess
Button Image as Form Input Submit Button
Bootstrap Navbar Link Color Won't Change
How to Fill 100% of Remaining Height
How to Remove The Horizontal Scrollbar in a Div
Square Div Where Height Is Equal to Viewport
Apply Border-Radius to Scrollbars with CSS
Adding Style to File Upload Button in CSS
How to Load CSS Asynchronously
Regex to Match All HTML Tags Except <P> and </P>
Textarea Value Not Getting Posted with Form
Display Background Color for The Page & Align Texts at Center
Vertical Align Text in Block Element