HTML and CSS Reference
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
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;">
<foreignObject x="10" y="10" width="100" height="150">
IZ IN YR ELEMENT
<em>WRAPPIN</em> YR TXT
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.