foreignObject-02.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"

     xmlns:html="http://www.w3.org/1999/xhtml"

     xmlns:xlink="http://www.w3.org/1999/xlink" onload="m();">

  <title>Testing that foreignobject works in filters</title>

  <foreignObject id="fo1" x="50" y="50" width="50" height="50">

    <html:div style="width:100%; height:100%; background:lime;">

    </html:div>

  </foreignObject>

  <foreignObject id="fo2" x="50" y="150" width="50" height="50" filter="url(#f1)">

    <html:div style="width:100%; height:100%; background:lime;">

    </html:div>

  </foreignObject>

  <filter id="f1" x="0" y="0" width="100%" height="100%">

    <feOffset/>

  </filter>

  <script>

		function m() {

		var svgns = "http://www.w3.org/2000/svg";

		var fo1 = document.getElementById("fo1");

		fo1.setAttribute("x", "150");

		var fo2 = document.getElementById("fo2");

		fo2.setAttribute("x", "150");

  </script>

</svg>