Experimenting with SVG foreignObject

by Ayyappan Sakthivadivel

HTML

<div>foo</div>
<svg width="100%" height="500">
  <rect x="10" y="10" width="100" height="150" fill="blue"/>
  <foreignObject x="10" y="10" width="100" height="150">
      <div xmlns="http://www.w3.org/1999/xhtml">
          Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
  </foreignObject>
 
  <circle cx="200" cy="200" r="100" fill="red"/>
  <foreignObject x="120" y="120" width="180" height="180" >
      <div xmlns="http://www.w3.org/1999/xhtml" class="svg-test" id="loading">
        <ul>
          <li><strong>First</strong> item</li>
 
          <li><em>Second</em> item</li>
          <li>Thrid item</li>
        </ul>
      </div>
  </foreignObject>
  
</svg>

CSS

.svg-test{
  color: #fff;
}

#loading {
		-webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}