HTML and CSS Reference
In-Depth Information
The previous example highlights another problem: text that won't fit in
the view isn't automatically wrapped. Line breaks also have to be
explicitly coded using the <tspan> element:
<text x="10" y="20">
HAI! IZ IN YR ELEMENT WRITIN
YR TXT
</text>
<text x="10" y="60">
<tspan x="10">HAI</tspan>
<tspan x="10" dy="20">
CAN HAS STDIO?
</tspan>
<tspan x="10" dy="20">
VISIBLE "HAI WORLD!"
</tspan>
<tspan x="10" dy="20">
KTHXBYE
</tspan>
</text>
A nice effect you can achieve on short runs of text is to make the text
follow a path. If you extract the circle part of the path from the earlier
example, you can spread the text along it with the <textpath> element:
<defs>
<path id="myTextPath"
d="M215,100
a50,50 0 1 1
-100,0 50,50 0 1 1
100,0">
</path>
</defs>
<text>
<textPath
xlink:href="#myTextPath">
HAI! IZ IN YR ELEMENT
WRITIN YR TXT
</textPath>
</text>
Search WWH ::




Custom Search