Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Embedding HTML in SVG</title>
</head>
<body>
​
<article id="example-introduction">
  <h1>Embedding HTML in SVG</h1>
​
  <p>This example shows the ramifications of using the attributes <code>requiredExtensions</code> and <code>requiredFeatures</code> when embedding HTML in SVG.</p>
</article>
​
<div id="example-html">
  <main>
    <h2>using invalid extension</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50">
      <switch x="10" y="10" width="100" height="40">
        <foreignobject requiredextensions="http://example.com/SVGExtensions/EmbeddedXHTML" x="10" y="10" width="100" height="40">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <p>hello world</p>
          </body>
        </foreignobject>
      </switch>
    </svg>
​
    <h2>using valid extension</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50">
      <switch x="10" y="10" width="100" height="40">
       <foreignobject requiredextensions="http://www.w3.org/1999/xhtml" x="10" y="10" width="100" height="40">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <p>hello world</p>
          </body>
        </foreignobject>
      </switch>
    </svg>
​
    <h2>using invalid feature</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50">
      <switch x="10" y="10" width="100" height="40">
        <foreignobject requiredfeatures="http://example.com/TR/SVG11/feature#Extensibility" x="10" y="10" width="100" height="40">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <p>hello world</p>
          </body>
        </foreignobject>
      </switch>
    </svg>
​
    <h2>using valid feature</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50">
      <switch x="10" y="10" width="100" height="40">
        <foreignobject requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="10" y="10" width="100" height="40">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <p>hello world</p>
          </body>
        </foreignobject>
      </switch>
    </svg>
​
    <h2>using no extension, no feature</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50">
      <foreignobject x="10" y="10" width="100" height="40">
        <p>hello world</p>
      </foreignobject>
    </svg>
  </main>
</div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x