HTML and CSS Reference
In-Depth Information
The path is created in the
<defs>
element,
and then you link to it using an
xlink:href
like you used for the image earlier. The link
works like other web content, so you could
refer to the path in a separate file if you
wanted to.
You can also apply gradient fills and any
number of other
SVG
effects to the text.
We'll cover this in detail in the next section,
but this example shows a gradient from
transparent light green to solid dark green
applied as a fill to a slightly larger version
of the circular text. See ch03/svg-10.html
for the full code for this example.
As with the
<canvas>
element, large blocks of text are somewhat
cumbersome in SVG. The text elements are only really useful for
labels and short descriptions. But SVG offers an alternative—you
can embed HTML content inside any element with
<foreignObject>
.
<rect x="5" y="5" width="10" height="160"
style="stroke-width: 5; stroke: rgb(102,102,102); fill: none;">
</rect>
<foreignObject x="10" y="10" width="100" height="150">
<body>
<p>
<strong>HAI!</strong><br/>
IZ IN YR ELEMENT
<em>WRAPPIN</em> YR TXT
</p>
</body>
</foreignObject>
Everything inside the
<foreignObject>
element is
HTML
; and unlike the
SVG
<text>
element,
HTML
can cope with wrapping text just fine by
itself. It's important to remember that the browser isn't rendering the
contents of
<foreignObject>
as if they were
HTML
; the content is
HTML
and can be interacted with in the normal way.
