HTML and CSS Reference
In-Depth Information
A second example will make this clearer.
On the right is a screenshot of the entire browser window; on the left
it's zoomed in to just the content of the foreignObject element. The
Duck Duck Go home page has been scaled down and rendered upside
down inside the browser, but it's still possible to type search terms and
see results returned (even if they're too small to read!). This was
achieved by wrapping an HTML document inside a <foreignObject>
element in SVG and then applying some transforms:
<svg id="mysvg" viewBox="0 0 800 600">
<g transform="rotate(180) translate(-800,-600)">
<foreignObject x="10" y="10" width="800" height="600">
<iframe src=""
This example shows a few things you've seen before. The viewBox is set
to 800 x 600 pixels, even though the element is 320 x 240 pixels; this
takes care of the scaling. And an <iframe> element is used inside the
<foreignObject> to fetch the Duck Duck Go page. New in this example
are the <g> element for grouping SVG content and the transform attri-
bute, both of which we'll look at in the next section.
Search WWH ::

Custom Search