1.12.1. SVG text-
<text>
¶
<text>
element is used to define text.
1.12.2. Example 1 ¶
Write a text:
Here is the SVG code: For Opera users: view the SVG file (right-click the SVG drawing preview source).Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
1.12.3. Example 2 ¶
Rotated text:
Here is the SVG code:Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love
SVG</text>
</svg>
1.12.4. Example 3 ¶
Text on the path:
Here is the SVG code:Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
1.12.5. Example 4 ¶
Elements can be arranged in any sub-group and
<tspan>
the number of elements. Every one of them.
<tspan>
elements can contain different formats and locations. Several lines of text and (
<tspan>
element):
Here is the SVG code:Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
1.12.6. Example 5 ¶
As link text (
<a>
element):
Here is the SVG code:Example ¶
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>