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">
<body>
<iframe src="http://duckduckgo.com/"
style="width:780px;height:580px">
</iframe>
</body>
</foreignObject>
</g>
</svg>
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.
