Skip to content

Instantly share code, notes, and snippets.

@Jverma

Jverma/README.md

Last active September 8, 2017 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jverma/2385cb7794d18c51e3ab to your computer and use it in GitHub Desktop.
Save Jverma/2385cb7794d18c51e3ab to your computer and use it in GitHub Desktop.
Download ZIP
HTML element inside a SVG
Raw
README.md

HTML inside a SVG using foreignObject.

How to add a non-svg (html) element inside svg.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>
<div>I'm a div inside the HTML</div>
<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>
</foreignobject>
</svg>
<div>Interesting! But you a Foreign Object.</div>
</body>
</html>
@waldyrious
Copy link

Great demo! There's a typo, though:

Interesting! But you a Foreign Object.

Looks like you accidentally the verb :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment